Question

所以我正在使用带有1-6编号选项的选择菜单。当有人选择选项3时，我希望我的.click(function(){})运行3次，或者如果有人选择5，那么我的.click(function(){})会运行5次。我正考虑在输入选择中添加onchange。有没有人有关于我应该如何设置它的建议？

以下是我的代码的基础知识：

＆＃13;

//biscuit
var idCounter = 1;

$("#addbiscuit").click(function() {

  var val = $("#txtAdd").val();
  var imageElement = $("<div class='sample_holder'><div class='biscuit'>.  <input type='image' src='Images/Merge Samples/Samplebox/102Biscuit.png' width='70%' name='closeStory' class='close_bisq_btn' width='22px'><p style='font-size: 9px';>click to remove</p><div class='checkbox'><label for='biscuit" + idCounter + "'>" + val + "</label><input id='biscuit" + idCounter + "' type='checkbox' name='check_list[]' value='#120 Biscuit monochrome'" + val + "' checked /></div></div></div>");
  idCounter++;
  if (maxAppend > 0) {
    $("#samplebox").append(imageElement);
    maxAppend--;
    $('#Grid input[type=checkbox]').attr('checked', 'checked');
  }

});

$("#samplebox").on('click', '.close_bisq_btn', function() {
  $(this).closest('.biscuit').remove();
  maxAppend++;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="howManyBiscuits" name="howManyBiscuits" onchange="">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
</select>

<button id="addbiscuit" class="AddButton">Add This Sample To My Tray</button>

＆＃13;

Answer 1

这个问题有点混乱，缺少代码。您是否希望根据所选饼干的数量添加新元素？请参阅下面的演示并告诉我们。

$("#addbiscuit").click(function() {
  var bisciutCount = $( "select#howManyBiscuits option:checked" ).val();
  var val = $("#txtAdd").val();
  for (var i = 1; i <= bisciutCount; i++){
  var imageElement = $("<div class='sample_holder'><div class='biscuit'>  <input type='image' src='http://2.bp.blogspot.com/-OQ_wj5FWmqY/UC-TYphU4pI/AAAAAAAAAds/jUe8AnHTiSo/s1600/50x50.gif' width='10%' name='closeStory' class='close_bisq_btn' width='22px'><p style='font-size: 9px';>click to remove</p><div class='checkbox'><label for='biscuit" + i + "'>" + "Biscuit ID: " + i + "</label><input id='biscuit" + i + "' type='checkbox' name='check_list[]' value='#120 Biscuit monochrome'" + val + "' checked /></div></div></div>");
    $("#samplebox").append(imageElement);
    $('#Grid input[type=checkbox]').attr('checked', 'checked');
}
});

$("#samplebox").on('click', '.close_bisq_btn', function() {
  $(this).closest('.sample_holder').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="howManyBiscuits" name="howManyBiscuits" onchange="">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
</select>

<button id="addbiscuit" class="AddButton">Add This Sample To My Tray</button>

<div id="samplebox">

</div>

Answer 2

您需要做的就是隔离您想要重复的功能。然后将该功能放在一个函数中。绑定到click事件的函数将触发重复。 howManyBiscuits字段的值将决定循环重复的次数。

＆＃13;

$(document).ready(function() {
  function clickHandler(value) {
    $(results).append("<p>Item" + value + "</p>");
  }

  $("#addbiscuit").on('click', function() {
    var repeatVal = $("select[name=howManyBiscuits]").val();
    $(results).html("");
    for (var i = 0; i < repeatVal; i++) {
      clickHandler(i + 1);
    }

  });


});

＆＃13;

<select id="howManyBiscuits" name="howManyBiscuits" onchange="">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
</select>

<button id="addbiscuit" class="AddButton">Add This Sample To My Tray</button>

<id id="results"></id>

＆＃13;

试图让我的.click（function（））运行x次

2 个答案: