Question

如何定位所选的span标记，以便在页面加载时显示值？我想在页面加载时显示一个列表。当用户按下图标时，另一个跨度列表加载。我可以隐藏它或显示两者，有没有办法使用显示 - 可见我做我需要的？

无法找出解决方案

＆＃13;

.box{
        padding: 20px;
/*         display: none;  
  iv turned this off to show both span classes*/
}


input {
display:none;
}

label input[type="radio"]:checked + img{
    border:1px solid red;
    display:invisible;

＆＃13;

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="red"){
            $(".box").not(".red").hide();
            $(".red").show();
        }
        if($(this).attr("value")=="green"){
            $(".box").not(".green").hide();
            $(".green").show();
        }
    });
});
</script>


	<div id="listitems">
	
        <label><input type="radio" name="colorRadio" value="red" checked="checked" /> <img src="us_flag.png"></label>
        <label><input type="radio" name="colorRadio" value="green"> <img src="eu-flag.gif"></label>

		
<li>Sugar:<span class="red box">4g </span> <span class="green box">1oz</span> </li>
<li>Fiber:<span class="red box">24g </span>  <span class="green box">24oz</span> </li>
			
	</div>

＆＃13;

Answer 1

您需要在单击功能之前和文档就绪功能之后找到选中的复选框。我已经更新了小提琴，现在只显示红色复选框。

＆＃13;

.box{
        padding: 20px;
/*         display: none;  
  iv turned this off to show both span classes*/
}


input {
display:none;
}

label input[type="radio"]:checked + img{
    border:1px solid red;
    display:invisible;

＆＃13;

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    var checkedValue = $(":checked").prop("value");
    if (checkedValue === "red") {
        $(".red").show();
        $(".green").hide();
    }
    else {
        $(".green").show();
        $(".red").hide();
    }
    $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="red"){
            $(".box").not(".red").hide();
            $(".red").show();
        }
        if($(this).attr("value")=="green"){
            $(".box").not(".green").hide();
            $(".green").show();
        }
    });
});
</script>


	<div id="listitems">
	
        <label><input type="radio" name="colorRadio" value="red" checked="checked" /> <img src="us_flag.png"></label>
        <label><input type="radio" name="colorRadio" value="green"> <img src="eu-flag.gif"></label>

		
<li>Sugar:<span class="red box">4g </span> <span class="green box">1oz</span> </li>
<li>Fiber:<span class="red box">24g </span>  <span class="green box">24oz</span> </li>
			
	</div>

＆＃13;

这是你想要的吗？

Answer 2

单选按钮的“红色”和“绿色”值与其对应的跨度类匹配的事实使得这非常简单。 “红色”和“绿色”不需要单独的分支。

$('input[name="colorRadio"]').on('click', function () {
    var value = $(this).val();
    var these = $("#listitems span." + value).show();
    $("#listitems span.box").not(these).hide();
}).filter(":checked").click();

为了更好地衡量，.filter(":checked").click()确保初始条件在页面加载时是正确的。

http://jsfiddle.net/bvbcqL66/

或者，如果您愿意，可以使用单行代码：

$('input[name="colorRadio"]').on('click', function () {
    $("#listitems span." + $(this).val()).show().siblings().hide();
}).filter(":checked").click();

http://jsfiddle.net/bvbcqL66/1/

使用CSS和jQuery使span类可见时遇到麻烦

2 个答案: