Question

我已经问了一个类似的问题，但让我试着用一段重复的代码。在下面的代码中，如何定义一般案例$('.add_field_button_sub_'+x)，而不是几个单个案例$('.add_field_button_sub_0'), $('.add_field_button_sub_1'), ... （是的，我知道，我错过了一些关于JS如何工作的基本理解，无论如何都请帮助）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>

<title> test </title>
<script src="jquery-3.2.0.js" type="text/javascript">  </script>  
<script  type="text/javascript"> 
$(document).ready(function() {
    var wrapper         = $(".input_fields_wrap"); 
   
    var x = 0; //initial text box count
    $(".add_field_button").click(function(e){ 

	 if(x < 4){
	$( "<div><div>Hello! ("+x+")</div><div><button class=\"add_field_button_sub_"+x+"\">Sub Button "+x+"</button></div><br><a href=\"#\" class=\"remove_field\">Remove</a></div><hr>" ).insertBefore( '.add_field_button' );

   var y = 0;
 $('.add_field_button_sub_0').click(function(e){ 


	$( "<div><div>Hello Sub! ("+x+"-"+y+")</div><br><a href=\"#\" class=\"remove_field\">Remove</a></div><hr>" ).insertBefore( '.add_field_button_sub_0' );
	y++; 
    });

 $('.add_field_button_sub_1').click(function(e){ 
	$( "<div><div>Hello Sub! ("+x+"-"+y+")</div><br><a href=\"#\" class=\"remove_field\">Remove</a></div><hr>" ).insertBefore( '.add_field_button_sub_1' );
	y++; 
    });

 $('.add_field_button_sub_2').click(function(e){ 
	$( "<div><div>Hello Sub! ("+x+"-"+y+")</div><br><a href=\"#\" class=\"remove_field\">Remove</a></div><hr>" ).insertBefore( '.add_field_button_sub_2' );
	y++; 
    });

x++; 
}
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove();
    })
}); </script>  


</head>
<body>
<h3>TEST</h3> </br>

<div class="input_fields_wrap">
    <button class="add_field_button">Fonti</button>
</div>

</body>
</html>

Answer 1

你可以使用jQuery的attribute contains selector。这将匹配具有包含add_field_button_sub_的类的所有按钮元素：

$("button[class*='add_field_button_sub_']")

请注意，为所有按钮提供相同的类并执行相对于当前元素的插入操作（由$(this)引用，例如单击回调）可能更有意义。

JQuery如何传递变量

1 个答案: