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

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>

这是一个 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 小提琴演示。

这利用了要显示的元素具有与的父元素id的类名匹配的属性这一事实。radiodiv

由于父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 小提琴演示。