更新问题:所以现在我可以让白衬衫上班,但不是黄色。我可以在白色的小内裤之间切换,但是换成黄色仍然只在白色衬衫尺寸之间切换。我已经缩写代码只显示小白色和小黄色
<select class="color">
<option value="white">White</option>
<option value="yellow">Yellow</option>
</select>
<input type="radio" class="size" name="size" value="small">Small
<input type="radio" class="size" name="size" value="medium" checked>Medium
<input type="radio" class="size" name="size" value="large">Large
和js:
$('.size').click(function() {
shirtButtons.hide();
if( $('.color').val() == 'white' || $('.size:checked').val() == 'small'){
shirtButtons.hide();
$('.white-small').show();
}else if( $('.color').val() == 'yellow' || $('.size:checked').val() == 'medium'){
shirtButtons.hide();
$('.yellow-medium').show();
}
});
$('.color').change(function() {
shirtButtons.hide();
if( $('.color').val() == 'white' || $('.size:checked').val() == 'small'){
shirtButtons.hide();
$('.white-small').show();
}else if( $('.color').val() == 'yellow' || $('.size:checked').val() == 'small'){
shirtButtons.hide();
$('.yellow-small').show();
}
});
答案 0 :(得分:2)
您必须在输入中添加课程size
。
<input type="radio" class="size" name="size" value="small">Small
<input type="radio" class="size" name="size" value="medium" checked>Medium
<input type="radio" class="size" name="size" value="large">Large
然后使用:checked
选择器获取值:
$(".size:checked").val()
完整的JS
$('.color, .size').click(function() {
if( $('.color').val() == 'white' || $(".size:checked").val() == 'small'){
shirtButtons.hide();
$('.white-small').show();
}else if( $('.color').val() == 'white' || $(".size:checked").val() == 'medium'){
shirtButtons.hide();
$('.white-medium').show();
} //etc
});
JS小提琴: http://jsfiddle.net/B93WW/
答案 1 :(得分:1)
以下是我为您创建的一些示例:
HTML代码
<select class="color">
<option value="white">White</option>
<option value="yellow">Yellow</option>
</select>
<input type="radio" class="size" name="size" value="small">Small
<input type="radio" class="size" name="size" value="medium" checked>Medium
<input type="radio" class="size" name="size" value="large">Large
JS代码
$('.size').click(function() {
myFunction();
});
$('select.color').change(function() {
myFunction();
});
function myFunction(){
shirtButtons.hide(); // Don't know what is shirtButtons, please explain
var color = $('select :selected').val();
var size = $('.size:checked').val();
if(color == 'white' || size == 'small'){
shirtButtons.hide(); // Don't know what is shirtButtons, please explain
$('.white-small').show();
} else if( colort == 'yellow' || size == 'medium'){
shirtButtons.hide(); // Don't know what is shirtButtons, please explain
$('.yellow-medium').show();
}
}
因此,您可以尝试alert
或console.log
变量color
和size
。
请告诉我您遇到问题的地方。