Question

我有一个函数可以检查某些单选按钮/下拉列表的值与数据值的比较（如果有的话），并显示“正确！”如果匹配，否则显示“不正确”。

在测试时，如果我注释掉该部分的一半 - 即，与无线电有关的部分或与下拉有关的部分 - 另一半效果很好。但是，如果它们同时运行，单选按钮总是返回“正确！”段落，即使他们的data和value不匹配。

代码如下。

我尝试过更改变量范围和为每个收音机明确设置data值，但到目前为止没有运气。

提前致谢！

jQuery('button[name^="handleClick"]').each(function() {

    var bt = jQuery(this),
        btId = bt.attr('name').substr(11);
  
    jQuery(bt).click(function() {
    
      var radio = jQuery('input[name="group' + btId + '"]:checked'),
          radioAns = jQuery(radio).attr('data');
      
      if (jQuery(radio).val()==radioAns) {
            document.getElementById('right' + btId).style.display = 'block';
            document.getElementById('wrong' + btId).style.display = 'none';
        } else {
            document.getElementById('right' + btId).style.display = 'none';
            document.getElementById('wrong' + btId).style.display = 'block';
        }
    });
    
    jQuery(bt).click(function() {
      
      var sel = ('#selector' + btId),
          selAns = jQuery(sel).attr('data');
      
        if(jQuery(sel).val()==selAns) {
            document.getElementById('right' + btId).style.display = 'block';
            document.getElementById('wrong' + btId).style.display = 'none';
        } else {
            document.getElementById('right' + btId).style.display = 'none';
            document.getElementById('wrong' + btId).style.display = 'block';
        }
    });
  
});

.selectors, .buttons, .radios {
  float: left;
  margin-right: 25px;
}
.rad-group {
  margin: 10px 0 40px 0;
}
select {
  margin: 10px 0 40px 20px;
}
.buttons p:nth-child(3n+1) {
  margin: 10px 0 48px 0;
}
p[id^="wrong"], p[id^="right"] {
  display: none;
}
.buttons p[id^="wrong"], .buttons p[id^="right"] {
  margin: -35px 0 15px 0;
}
.rad-group p[id^="wrong"], .rad-group p[id^="right"] {
  margin: 10px 0 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radios">
  <div class="rad-group">
    <input name="groupBanana" type="radio" value="a" data="a"/>
    <input name="groupBanana" type="radio" value="b" />
    <input name="groupBanana" type="radio" value="c" />
    <input name="groupBanana" type="radio" value="d" />
    <button name="handleClickBanana">Check Answer</button>

    <p id="rightBanana">Right! Good job!</p>
    <p id="wrongBanana">Sorry, incorrect answer.</p>
  </div>

    <div class="rad-group">
      <input name="groupApple" type="radio" value="a"/>
      <input name="groupApple" type="radio" value="b" data="b"/>
      <input name="groupApple" type="radio" value="c"/>
      <input name="groupApple" type="radio" value="d"/>
      <button name="handleClickApple">Check Answer</button>

      <p id="rightApple">Right! Good job!</p>
      <p id="wrongApple">Sorry, incorrect answer.</p>
  </div>
  
  <div class="rad-group">
    <input name="groupGrapes" type="radio" value="a"/>
    <input name="groupGrapes" type="radio" value="b"/>
    <input name="groupGrapes" type="radio" value="c" data="c"/>
    <input name="groupGrapes" type="radio" value="d"/>
    <button name="handleClickGrapes">Check Answer</button>

    <p id="rightGrapes">Right! Good job!</p>
    <p id="wrongGrapes">Sorry, incorrect answer.</p>
  </div>
</div>

<div class="selectors">
  <div class="select-container"><select id="selectorMID1" data="4"><option selected="selected">--</option><option value="4">4</option><option value="3">3</option><option value="2">2</option><option value="1">1</option><option value="0">0</option></select></div>

  <div class="select-container"><select id="selectorMID2" data="3"><option selected="selected">--</option><option value="4">4</option><option value="3">3</option><option value="2">2</option><option value="1">1</option><option value="0">0</option></select></div>

  <div class="select-container"><select id="selectorMID3" data="1"><option selected="selected">--</option><option value="4">4</option><option value="3">3</option><option value="2">2</option><option value="1">1</option><option value="0">0</option></select></div>
</div>

<div class="buttons">
  <p><button name="handleClickMID1">Check Answer</button></p>
  <p id="wrongMID1">Sorry, incorrect answer.</p>
  <p id="rightMID1">Right! Good Job!</p>

  <p><button name="handleClickMID2">Check Answer</button></p>
  <p id="wrongMID2">Sorry, incorrect answer.</p>
  <p id="rightMID2">Right! Good Job!</p>

  <p><button name="handleClickMID3">Check Answer</button></p>
  <p id="wrongMID3">Sorry, incorrect answer.</p>
  <p id="rightMID3">Right! Good Job!</p>
</div>

Answer 1

为什么不将两个click（）函数合并为一个？

jQuery(bt).click(function() {

  var radio = jQuery('input[name="group' + btId + '"]:checked'),
      radioAns = jQuery(radio).attr('data');

  if (jQuery(radio).val()==radioAns) {
        document.getElementById('right' + btId).style.display = 'block';
        document.getElementById('wrong' + btId).style.display = 'none';
    } else {
        document.getElementById('right' + btId).style.display = 'none';
        document.getElementById('wrong' + btId).style.display = 'block';
    }

  var sel = ('#selector' + btId), selAns = jQuery(sel).attr('data');

    if(jQuery(sel).val()==selAns) {
        document.getElementById('right' + btId).style.display = 'block';
        document.getElementById('wrong' + btId).style.display = 'none';
    } else {
        document.getElementById('right' + btId).style.display = 'none';
        document.getElementById('wrong' + btId).style.display = 'block';
    }
});

Answer 2

如果重新构建HTML并更有效地使用类和数据属性，那么您的代码都可以大大简化：

＆＃13;

$(document).on('click','.check-answer',function(){
    var $this=$(this);
    var $question=$this.closest('.question');
    var type=$question.data('type');
    if($.inArray(type,['checkbox','radio'])) type = ':checked';
    var correctAnswer=$question.data('check').toString().trim();
    var selectedAnswer=($question.find(type).val() || '').toString().trim();
    $question.find('.message').remove();
    var message = correctAnswer == selectedAnswer ? 'Right! Good job!' : 'Sorry, incorrect answer.';
    $('<div class="message">'+message+'</div>').insertAfter($this);
});

＆＃13;

.selectors,
.buttons,
.radios {
  float: left;
  margin-right: 25px;
}

.rad-group {
  margin: 10px 0 40px 0;
}

select {
  margin: 10px 0 40px 20px;
}

.buttons p:nth-child(3n+1) {
  margin: 10px 0 48px 0;
}

p[id^="wrong"],
p[id^="right"] {
  display: none;
}

.buttons p[id^="wrong"],
.buttons p[id^="right"] {
  margin: -35px 0 15px 0;
}

.rad-group p[id^="wrong"],
.rad-group p[id^="right"] {
  margin: 10px 0 0 0;
}

.message{
    display: inline-block;
    margin-left: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="radios">
  <div class="rad-group question" data-check="a" data-type="radio">
    <input name="groupBanana" type="radio" value="a"/>
    <input name="groupBanana" type="radio" value="b" />
    <input name="groupBanana" type="radio" value="c" />
    <input name="groupBanana" type="radio" value="d" />
    <button class="check-answer">Check Answer</button> 
  </div> 
</div>

<div class="selectors">
  <div class="select-container question" data-check="4" data-type="select">
    <select id="selectorMID1">
      <option selected="selected">--</option>
      <option value="4">4</option>
      <option value="3">3</option>
      <option value="2">2</option>
      <option value="1">1</option>
      <option value="0">0</option>
    </select>
    <button class="check-answer">Check Answer</button> 
  </div> 
</div>

＆＃13;

Answer 3

我最终把它分成两个独立的功能。这有助于我扩展我想要添加的功能。

如何分隔我的嵌套函数，使它们不会互相干扰？

3 个答案: