为多个实例创建一个jquery代码

时间：2016-08-24 09:46:48

标签： javascript jquery html css

我有多个带有复选框值的div。目前这是我在textarea中捕获已检查值的方式。但我必须为每个具有此复选框值的div编写按钮单击代码。有没有办法让div的js代码统一起来。因此，我不必为此目的使用非常庞大的JS文件。

$("#sport").click(function() { var p=$("#myModal1 #checkid"); $(p).html("I don't play these games"); $.each($("input[name='sport']:checked"), function() { $(p).html($(p).html() + '\n' + $(this).val()+ '\n' + "--------------------------" + '\n' + "Thank you for contacting us!" + '\n' + "-----------------------------------"); });

我想让这个逻辑对所有其他div都很常见。我似乎无法理解这一点。

$(document).ready(function(){
  
  $('a').on('click', function(e){
    e.preventDefault();
	var divname= this.name;
    $("#"+divname).fadeIn("slow").siblings().fadeOut("fast");
    if ($("#"+divname).height() >= $(window).height()) {
		$('html, body').animate({
        scrollTop: $( $("#"+divname) ).offset().top
    }, 1000);
}
  
  });
  
  
 $("#sport").click(function() { var p=$("#myModal1 #checkid"); $(p).html("I  play these games"); $.each($("input[name='sport']:checked"), function() { $(p).html($(p).html() + '\n' + $(this).val()+ '\n' + "--------------------------" + '\n' + "Thank you for contacting us!" + '\n' + "-----------------------------------"); }); 
                               
  $("#sport1").click(function() { var p=$("#myModal1 #checkid"); $(p).html("I don't play these games"); $.each($("input[name='sport']:checked"), function() { $(p).html($(p).html() + '\n' + $(this).val()+ '\n' + "--------------------------" + '\n' + "Thank you for contacting us!" + '\n' + "-----------------------------------"); }); 
                                                       
                                 
 $("#drinks").click(function() { var p=$("#myModal1 #checkid"); $(p).html("I drink these"); $.each($("input[name='drink']:checked"), function() { $(p).html($(p).html() + '\n' + $(this).val()+ '\n' + "--------------------------" + '\n' + "Thank you for contacting us!" + '\n' + "-----------------------------------"); }); 
 
  $("#drinks1").click(function() { var p=$("#myModal1 #checkid"); $(p).html("I don't drink these"); $.each($("input[name='drink']:checked"), function() { $(p).html($(p).html() + '\n' + $(this).val()+ '\n' + "--------------------------" + '\n' + "Thank you for contacting us!" + '\n' + "-----------------------------------"); });                                
                                
//Clear Textarea
 $('#myModal1').on('hidden', function() {
    clear()
  });
<div id="myModal1" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
      <textarea class="form-control" id="checkid"   style="min-width: 100%" rows = "20" class="auto">
</textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<a href="#" name="div100" class="btn btn-primary btn-lg" ><font color = "white">item1</font></a>
<a href="#" name="div200" class="btn btn-primary btn-lg" ><font color = "white">item2</font></a>
<a href="#" name="div300" class="btn btn-primary btn-lg" ><font color = "white">item3</font></a>
<a href="#" name="div400" class="btn btn-primary btn-lg" ><font color = "white">item4</font></a>

<div id="div100" style="display:none" align="left">
<li1><a href="#" name="div1" >item1-desc1</a></li1>
<li1><a href="#" name="div2" >item1-desc2</a></li1>
<li1><a href="#" name="div3" >item1-desc3</a></li1>
  
<div id="div200" style="display:none" align="left">
<li1><a href="#" name="div4" > item2-desc1</a></li1>
<li1><a href="#" name="div5" >item2-desc2</a></li1>
<li1><a href="#" name="div6" >item2-desc3</a></li1>
    
<div id="div300" style="display:none" align="left">
<li1><a href="#" name="div7" > item3-desc1</a></li1>
<li1><a href="#" name="div8" >item3-desc2</a></li1>
<li1><a href="#" name="div9" >item3-desc3</a></li1>
      
<div id="div400" style="display:none" align="left">
<li1><a href="#" name="div10" > item4-desc1</a></li1>
<li1><a href="#" name="div11" >item4-desc2</a></li1>
<li1><a href="#" name="div12" >item4-desc3</a></li1>
  
<div id="div1" style="display:none" align="left">
 <form>
  <h3>Select your favorite sports:</h3>
  <label>
    <input type="checkbox" value="football" name="sport"> Football</label>
  <label>
    <input type="checkbox" value="baseball" name="sport"> Baseball</label>
  <label>
    <input type="checkbox" value="cricket" name="sport"> Cricket</label>
  <label>
    <input type="checkbox" value="boxing" name="sport"> Boxing</label>
  <label>
    <input type="checkbox" value="racing" name="sport"> Racing</label>
  <label>
    <input type="checkbox" value="swimming" name="sport"> Swimming</label>
  <br>
  <button type="button" id="sport">I play these</button>
    <button type="button" id="sport1">I dont play these</button>
   
</form>
<div id="div2" style="display:none" align="left">
 <form>
  <h3>Select your favorite drinks:</h3>
  <label>
    <input type="checkbox" value="Coke" name="drink"> 
    Coke</label>
  <label>
    <input type="checkbox" value="Pepsi" name="drink"> Pepsi</label>
  <label>
    <input type="checkbox" value="Mountain Dew" name="drink"> Mountain Dew</label>
  <label>
    <input type="checkbox" value="Beer" name="drink"> Beer</label>
  <label>
    <input type="checkbox" value="Lemonade" name="drink"> Lemonade</label>
  
  <br>
  <button type="button" id ="drinks">I drink these</button>
   <button type="button" id ="drinks1">I don't drink these</button>
</form>
<div id="div3" style="display:none" align="left">
  <!--div3 contents-->
<div id="div4" style="display:none" align="left">
  <!--div4 contents-->
  
  <!--So on-->

2 个答案:

答案 0 :(得分：3)

创建一个通用函数并使用它，如

function thankyou(type){
    var p=$("#myModal1 #checkid"); 
    $(p).html("I don't play these games"); 
    $.each($("input[name='"+type+"']:checked"), function() { 
      $(p).html($(p).html() + '\n' + $(this).val()+ '\n' + 
         "--------------------------" + '\n' +
         "Thank you for contacting us!" + '\n'
         + "-----------------------------------"); 
    });
}

$("#sport").click(function() { 
    thankyou('sport');
});                                
$("#drinks").click(function() { 
    thankyou('drink');
});

另一种最好的方法我认为是为你要调用的所有按钮添加一个额外的属性，如data-type，比如，

<button type="button" data-type="drink" id ="drinks">Get Values</button>
<button type="button" data-type="sport" id ="drinks">Get Values</button>

现在，在jquery代码中更改它，

$('button[data-type]').on('click',function(){
    type= $(this).data('type');// will give sport,drink, etc
    var p=$("#myModal1 #checkid"); 
    $(p).html("I don't play these games"); 
    $.each($("input[name='"+type+"']:checked"), function() { 
      $(p).html($(p).html() + '\n' + $(this).val()+ '\n' + 
         "--------------------------" + '\n' +
         "Thank you for contacting us!" + '\n'
         + "-----------------------------------"); 
    });
});

此外，如果您对这些字段使用任何服务器端代码，我认为名称（运动，饮料等）应该是sport[]，drink[]等数组。

答案 1 :(得分：0)

试试这个：您可以使用类向所有相关按钮和绑定事件处理程序添加一个类。 例如，将class="action"添加到下面的按钮

<button type="button" id ="sport" class="action">Get Values</button>
<button type="button" id ="drinks" class="action">Get Values</button>

添加点击处理程序，将输入名称替换为点击按钮的ID 

$(".action").click(function() { var p=$("#myModal1 #checkid"); $(p).html("I don't play these games"); $.each($("input[name='" + this.id + "']:checked"), function() { $(p).html($(p).html() + '\n' + $(this).val()+ '\n' + "--------------------------" + '\n' + "Thank you for contacting us!" + '\n' + "-----------------------------------"); });

编辑 - 由于OP无法将类添加到按钮，请使用下面带有选择器的代码作为按钮。这将适用于表单中的两个按钮，如果许多其他类似的表单添加到页面，OP不需要更改代码。 

$("form button").click(function() { 
     var p=$("#myModal1 #checkid"); 
     $(p).html($(this).text()); 
      $(this).closest('form').find('input[type="checkbox"]:checked').each(function() {
     $(p).html($(p).html() + '\n' + $(this).val()+ '\n' + "--------------------------" + '\n' + "Thank you for contacting us!" + '\n' + "-----------------------------------"); 
  });
});
相关问题
最新问题