0

我想根据我选择的单选按钮显示图像。首先我隐藏所有图像，然后在下一个函数中我想显示正确的图像。隐藏作品，我在变量值中有正确的值。然而，'$(value).show();' 行 不适合我。我试过编辑它，但没有任何帮助。有人可以帮忙吗？如何正确使用此代码按 id 显示 img？谢谢

/*when a radio button is clicked, hide imgs*/
$(document).ready(function(){
  $(".ClassRadio").click(function(){
    $(".ClassImgShape").hide();
  });
});

/*shows img based on selected radio button*/
$(document).ready(function(){
$("input:radio[name=radioshape]").click(function() {
    var value = $(this).val();
    //$("p").text(value);
    $(value).show();
});
});


<img class=ClassImgShape id=ushape src="./ushape.png" alt="u-shape" title="u-shape">
<img class=ClassImgShape id=lshape src="./lshape.png" alt="l-shape" title="l-shape">
4

2 回答 2

1

请注意，我将完整的选择器存储为单选输入的值，而不仅仅是 id，因为 jQuery 使用它来知道我们是通过 id 而不是另一个属性搜索的。此外，您只需要一个 $(document).ready(function(){});来调用您的代码。

HTML

<input type="radio" name="radio1" value="#image1">
<input type="radio" name="radio2" value="#image2">
<input type="radio" name="radio3" value="#image3">
<input type="radio" name="radio4" value="#image4">

<img class='hide' id='image1' src='foo'/>
<img class='hide' id='image2' src='foo'/>
<img class='hide' id='image3' src='foo'/>
<img class='hide' id='image4' src='foo'/>

jQuery

//Hide all images with class 'hide' for example
$("img.hide").hide();

//Show on click
$("input[type='radio']").click(function(){
   $(this.value).show(); 
});
于 2013-06-16T10:53:01.403 回答
0

替换这个：

$(value).show();

有了这个：

$('#' + value).show();

您必须获得的价值，ushape或者lshape但要显示您需要#在其前面放置的图像。

更新

您也可以通过以下简单方式执行此操作：

$("input:radio[name=radioshape]").click(function () {
    $('#' + this.value).show();

    console.log(this.value);  
    // Check the console, if you are getting correct value
    // Above line of code needed, just for debugging purpose..
    // You can comment that out
});
于 2013-06-16T10:48:56.310 回答