Question

当您点击单选按钮时，我使用它来显示多个内容。我无法看到内容。但是当我将ti值改为1,2,3,4,6,7,8时它工作正常。知道我做错了什么吗？

var options = $('#options').find('input');

    options.click(function(){
    $('#deafaultBottom').hide();
      var id = "opt" + $(this).val();
      $(".optDivs").hide();
      $("#" + id).show();

    });

这是我的html结构

<div id="options">
        <div class="opt1"><input type="radio" name="primary" value="color" /></div>
        <div class="opt2"><input type="radio" name="primary" value="dry" /></div>
        <div class="opt3"><input type="radio" name="primary" value="damaged" /></div>
        <div class="opt4"><input type="radio" name="primary" value="thinning" /></div>
    </div>

<div class="holderOne">
        <div id="opt1" class="optDivs" style="display:none;"><img src="images/bigBottom1.png" /></div>
        <div id="opt2" class="optDivs" style="display:none;"><img src="images/bigBottom2.png" /></div>
        <div id="opt3" class="optDivs" style="display:none;"><img src="images/bigBottom3.png" /></div>
        <div id="opt4" class="optDivs" style="display:none;"><img src="images/bigBottom4.png" /></div>
    </div>

Answer 1

你的问题是价值是'颜色'，'干'，'损坏'广告'变薄'但你的持有人ID是opt1，opt2，opt3，opt4。你想要做的是在你的选项中加上'1'，'2'，'3'和'4'，并在它们旁边放一些文字，以便用户看到你想要的内容。以下是您的代码，其中包含建议的修改：

<div id="options">
    <div class="opt1"><input type="radio" name="primary" value="1" />color</div>
    <div class="opt2"><input type="radio" name="primary" value="2" />dry</div>
    <div class="opt3"><input type="radio" name="primary" value="3" />damaged</div>
    <div class="opt4"><input type="radio" name="primary" value="4" />thinning</div>
</div>

<div class="holderOne">
    <div id="opt1" class="optDivs" style="display:none;"><img src="images/bigBottom1.png" /></div>
    <div id="opt2" class="optDivs" style="display:none;"><img src="images/bigBottom2.png" /></div>
    <div id="opt3" class="optDivs" style="display:none;"><img src="images/bigBottom3.png" /></div>
    <div id="opt4" class="optDivs" style="display:none;"><img src="images/bigBottom4.png" /></div>
</div>

和here is a jsFiddle代码正常工作，一些文本添加到div（1,2,3,4）以显示它正在正确切换。

Answer 2

试试这个：

var options = $('#options').find('input');
    options.click(function(){
      $('#deafaultBottom').hide();
      $(".optDivs").hide();
      $("#" + $($(this).parent()).attr('class') ).show();
    });

Answer 3

我建议：

var options = $('#options').find('input');

options.click(function () {
    // I have no idea what element you're affecting here
    $('#deafaultBottom').hide();
    // using the class-name of the parent div element
    var ref = this.parentNode.className;
    // hiding all divs within the .holderOne element
    $('.holderOne div').hide();
    // showing the element that has the same id as the
    // parent's class-name
    $('#' + ref).show();
});

JS Fiddle demo

这利用了 show 的元素具有id属性以匹配radio的父div的类名这一事实元件。

由于父div元素可能有多个类，您可以使用正则表达式来标识以字符串opt开头的类名，后跟一个数字：

var options = $('#options').find('input');

options.click(function () {
    $('#deafaultBottom').hide();
    var ref = this
    .parentNode
    // matches the first instance in which the string 'opt' is followed by
    // a, or a sequence of, number(s).
    .className.match(/\b(opt\d+)\b/)[0];
    console.log(ref);
    $('.holderOne div').hide();
    $('#' + ref).show();
});

JS Fiddle demo

通过广播点击显示多个内容

3 个答案: