Javascript 通过收音机单击显示多个内容

当你点击单选按钮时，我用它来显示多个内容。我看不到内容。但当我将ti值改为1,23,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>

---

您的问题是这些值是“颜色”、“干燥”、“损坏”和“变薄”，但您的持有者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>

颜色
干的
损坏
变薄

在代码正常工作的情况下，在div（1,2,3,4）中添加一些文本，以显示它正在正确切换。

尝试以下操作：

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

我建议：

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();
});

这利用了这样一个事实，即要显示的元素具有一个

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();
});

---

.

@Benjamin问题是我正在通过电子邮件发送值。因此，当客户收到电子邮件中的1,2,3,4时，他们会感到困惑。您发送的电子邮件的代码在哪里？它是用PHP编写的吗？只需在服务器端创建一个关联数组，将其解码回来（如果您向我展示您发送的电子邮件的样子，我可以帮助您编写代码）。另一个选项是将您的holderOne div id命名为“optColor”、“optDry”、“optdamage”、“optThinning”，并将您的值分别命名为“Color”、“Dry”、“Demaged”和“Thining”。看@benjamin-我喜欢你的第二个选择。我想我最终可能会把数据发布到数据库中，这样我就不会花太多时间修改PHP了。但是你刚刚用你的第二把小提琴解决了我的问题。谢谢man@soum如果我的答案对你有用，请你把它标为正确。没问题，男人：）