Я написал небольшой скрипт, который должен изменить 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);
}
});
Я бы определенно 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(","));
});
});
Вот рабочий ответ, который я придумал - вы просто перекомпилировали его, закодировав запятые в строках. Просто проверьте, проверен ли каждый из них, и если да, проверьте, проверено ли еще одно. Если это так, добавьте запятую, а затем добавьте проверенное значение. После трех операторов 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);
});
Что-то вроде этого... см. По адресу: 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();