Изменить href в зависимости от флажков

Question

Изменить href в зависимости от флажков

0

Я написал небольшой скрипт, который должен изменить URL-адрес в зависимости от того, какие флажки активны. "Проблема" заключается в том, что существуют особые случаи, переменные "один" и "два" имеют запятую, когда href является "один, два, три", но если установлен только флажок "два", то href также должен просто быть "двумя" без запятой. Я получаю эту работу более или менее с функцией slice.

Есть ли лучший способ записать это в функцию и сохранить x строк кода?

ДЕМО: http://jsfiddle.net/UKD2m/

var one ="111,";
var two ="222,";
var three ="333";

$('body').append('<a href=\"' + one + two + three + '\">link</a>'); //this is the default value

$('.checkbox').change(function() {
  if ($('#one').is(':checked')) { // one only + slice out last character (comma)
    $("a").attr("href", one.slice(0,-1));
  }
  if ($('#one').is(':checked') && $('#two').is(':checked')) { //one and two
    $("a").attr("href", one + two);
  }
  if ($('#one').is(':checked') && $('#three').is(':checked')) { //one and three
    $("a").attr("href", one + three);
  }
  if ($('#two').is(':checked')) { // two only + slice out last charachter (comma)
    $("a").attr("href", two.slice(0,-1));
  }
  if ($('#two').is(':checked') && $('#three').is(':checked')) { // two and three
    $("a").attr("href", two + three);
  }
  if ($('#three').is(':checked')) { // three only
    $("a").attr("href", three);
  }
  if ($('#one').is(':checked') && $('#two').is(':checked') && $('#three').is(':checked')) { // three only
    $("a").attr("href", one + two + three);
  }
});

Yunowork 25 апр. 2014, в 19:15

Источник

0

Почему бы вам не установить некоторые данные на флажки и использовать функцию соединения javascript? При этом все эти условия будут не нужны
AndreDurao 25 апр. 2014, в 16:44
0

Ваш код работает правильно?
Pratik 25 апр. 2014, в 16:45

Теги:

javascript

jquery

3 ответа

1

Вот рабочий ответ, который я придумал - вы просто перекомпилировали его, закодировав запятые в строках. Просто проверьте, проверен ли каждый из них, и если да, проверьте, проверено ли еще одно. Если это так, добавьте запятую, а затем добавьте проверенное значение. После трех операторов if вы получите свою строку!

var one ="111";
var two ="222";
var three ="333";

$('body').append('<a href=\"' + one + "," + two + "," + three + '\">link</a>'); //this is the default value

$('.checkbox').change(function() {
    var href = "";
    if ($('#one').is(':checked')) {
        href = one;
    }
    if ($('#two').is(':checked')) { 
        href += (href != "") ? "," + two : two;
    }
    if ($('#three').is(':checked')) {
        href += (href != "") ? "," + three : three;
    }
    $("a").attr("href", href);
});

Sam Hanley 25 апр. 2014, в 14:30

0

Что-то вроде этого... см. По адресу: http://jsfiddle.net/gh64L/3/

function getATxt(){
    var ary = [];
    $("input[type='checkbox']:checked").each( function(){
        ary.push($(this).data("href"));
    });
    $("a#mylink").attr("href", ary.join(","));
}
$('.checkbox').change(function() {
  getATxt();
});
//@ startup
getATxt();

AndreDurao 25 апр. 2014, в 15:43

Ещё вопросы

Почему бы вам не установить некоторые данные на флажки и использовать функцию соединения javascript? При этом все эти условия будут не нужны

talemyn · Accepted Answer · 2014-04-25T15-56-00.000Z

Я бы определенно href значения href из атрибутов value опций флажка, если вы свободны в этом. Во-первых, вам нужно будет установить свои флажки, чтобы иметь связанные с ними значения:

<input class="checkbox" id="one" type="checkbox" checked value="111">one<br />
<input class="checkbox" id="two" type="checkbox" checked value="222">two<br />
<input class="checkbox" id="three" type="checkbox" checked value="333">three<br />

Я бы просто пошел вперед и по умолчанию ссылку в HTML, для начала, если это возможно:

<a href="111,222,333">link</a>

Затем вы можете уменьшить свой JS, чтобы каждый раз, когда один из флажков был изменен, он будет смотреть на группу, определять, какие из них выбраны, а затем присоединить значения этих выбранных в одну строку:

$(document).ready(function() {
    $('.checkbox').on("change", function() {
        var aHrefVals = [];

        $('.checkbox').filter(":checked").each(function() {
            aHrefVals.push($(this).val());
        });

        $("a").attr("href", aHrefVals.join(","));
    });
});

Я могу получить доступ к значениям HTML, так что на самом деле это было бы лучше. Большое спасибо за решение!
Рад был помочь . , , рад, что это сработало для вас. :)