jQuery

Question

我想做的是将选中的值和点击功能都分配给位于父 div 内部的单选输入。我目前有这段代码，但它只适用于分配选中的值。 click()函数不起作用：

<div id="contPosition">
 <div class="contPosition">
 <input type="radio" class="posPrint1" />
 </div>
 <div class="contPosition">
 <input type="radio" class="posPrint2" />
 </div>
 <div class="contPosition">
 <input type="radio" class="posPrint3" />
 </div>
</div>
</div>
</div>

<div id="contPrintPosition">
 <div class="contPrintPosition">
 <input type="radio" class="posPrint1" />
 </div>
 <div class="contPrintPosition">
 <input type="radio" class="posPrint2" />
 </div>
 <div class="contPrintPosition">
 <input type="radio" class="posPrint3" />
 </div>
</div>
</div>
</div>

<script>
jQuery('.contPosition').click(function () {    
    var val =  $(this).find('input:radio').prop('checked')?false:true;
    $(this).find('input:radio').prop('checked', val);
});

//THIS FUNCTION DOES NOT WORK AS EXPECTED
jQuery('.contPosition input').click(function(){
       var curCls = $(this).attr('class');
       $(`.contPrintPosition > input.${curCls}`).val("Test");
});

//THIS FUNCTION DOES NOT WORK AS EXPECTED
jQuery('.contPosition input[type=radio]').click(function(){
    if (this.previous) {
    this.checked = false;
    }
    this.previous = this.checked;                           
});
</script>

Answer 1

我不知道你到底想实现什么，但只有一个点击事件可以替换所有其他事件，如下片段：

$(function() {
  //should be ".contPosition input[type=radio]"
  $('.contPosition input[type=radio]').click(function(e) {
    
    var curCls = $(this).attr('class');
    $(`.contPrintPosition > input.${curCls}`).val("Test");
    if (this.previous) {
      this.checked = false;
    }
    this.previous = this.checked;
  });
})

.contPrintPosition input::after {
  content:  attr(value);
  width:100%;
  margin-left:15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contPosition">
  <div class="contPosition">
    <input type="radio" class="posPrint1" />
  </div>
  <div class="contPosition">
    <input type="radio" class="posPrint2" />
  </div>
  <div class="contPosition">
    <input type="radio" class="posPrint3" />
  </div>
</div>

<div id="contPrintPosition">
  <div class="contPrintPosition">
    <input type="radio" class="posPrint1" />
  </div>
  <div class="contPrintPosition">
    <input type="radio" class="posPrint2" />
  </div>
  <div class="contPrintPosition">
    <input type="radio" class="posPrint3" />
  </div>
</div>

jQuery - 将点击功能分配给收音机输入

jQuery - Assign the click function to the radio input

javascript

click

onclick

prop