Question

我有类似的东西，但它不起作用：

<!-- ... code .. -->

var id = 0;        

data.forEach(function(item, i) {
      id = id+1;

$( ".button-" + id ).click(function() {
$( ".button-" + id ).toggle();

});

<!-- ... code .. -->

我想要的是：有一些DIV，如button-1，button-2 ......等等。我做了一个切换，我想用这个循环自动化它，因为内容是动态生成的。但这似乎是错误的方式......在这个循环中它不起作用。

那么如何动态切换按钮-1，按钮-2，...... ??

这就是这个，这似乎是错误的：

$( ".button-" + id ).click(function() {
$( ".button-" + id ).toggle();

修改

好吧，也许我的问题有点凌乱谢谢大家到目前为止你的答案，我真的很感激！但对我来说没有正确的答案......所以再次，现在更具体：

我有一些带有素材图标的按钮，这些按钮应该会在点击时改变它们的状态。

<a href="" class="likebutton-1"><i class="material-icons">favorite</i></a>
<a href="" class="likebutton-1" style="display:none;"><i class="material-icons">favorite_border</i></a>

HTML内容是动态生成的，所以有类似按钮-1，就像按钮-2 ......

然后又有另一个显示许多喜欢的DIV：

<div class="likes-1">99 likes</div>
<div class="likes-1" style="display:none;">100 likes</div>

DIVs在外部容器内。

这是我的jQuery代码：

$( ".likebutton-1" ).click(function() {
$( ".likebutton-1" ).toggle();
$( ".likes-1" ).toggle();
});

嗯，那段代码对我有用。该图标从收藏夹切换到favorite_border，喜欢从99切换到100 ...（它只是一个演示应用程序，因此没有必要真正计算喜欢的内容）

但是我想动态地生成jQuery代码，那就是什么不起作用...现在我必须为likebutton-1设置手动切换，就像按钮-2 ......

Answer 1

我认为这就是你的意思：D

https://jsfiddle.net/1eo4b33m/1/

$("[class*=button-]").click(function(){
    $(this).toggle()
})

Answer 2

根据您的最新更新，我建议您在HTML标记中进行一些结构更改。

而不是使用：

$(".next").click(function(){
    $("fieldset").children().not("h2, h3, button").each(function(){
        if(!$(this).val()){
    alert("Empty!!")
    }
    })
})

我建议只使用一个元素 - 这可以防止样式问题。另外，如果您动态生成这些段，请删除<a href="" class="likebutton-1"><i class="material-icons">favorite</i></a> <a href="" class="likebutton-1" style="display:none;"><i class="material-icons">favorite_border</i></a>或-1后缀，否则您需要大量（动态创建的）事件侦听器。

这样做：

-X

我将课程<a href="#" class="likebutton"><i class="material-icons icon-fav">favorite</i></a>添加到您的元素中，以便提前更轻松地访问它。

现在我们为你喜欢的部分做同样的事情并改进代码结构。从文本中分离like-count（数字）。所以我们可以轻松地增加或减少这个数字。

icon-fav

因为您提到自动生成此段，我假设您在这些元素周围有类似的东西，例如：

<div class="likes"><span class="likes-count">99</span> likes</div>

现在我们关心其余的 - JavaScript。

我们需要进行一些树遍历，因为已删除了类的<div class="parent-container"> <a href="#" class="likebutton"><i class="material-icons icon-fav">favorite</i></a> <div class="likes"><span class="likes-count">99</span> likes</div> </div>后缀 - 否则我们会在单击其中一个时立即更改所有元素。您可以在此处找到有关jQuery Tree Traversal的更多信息。

-x

此事件侦听器使用$(".likebutton").click(function() { var $parent = $(this).closest(".parent-container"); var likes = parseInt($parent.find(".likes-count").text()); if($parent.find(".icon-fav").text() == "favorite") { $parent.find(".icon-fav").text("favorite_border"); $parent.find(".likes-count").text(++likes); } else { $parent.find(".icon-fav").text("favorite"); $parent.find(".likes-count").text(--likes); } });方法查找其父容器，即使您的代码更嵌套，也会使此代码正常工作。此.closest()变量是所有后续查询的搜索基础。我使用$parent一直遍历 - 如果有必要 - 因为你可能有一个更嵌套的结构。

这是working jsfiddle！试一试。

Answer 3

相反，给它一个机会！：）

$("[class*='button-']").click(function(){
    $(this).toggle();
});

Answer 4

你必须在这里使用闭包，

var id = 0;   

data.forEach(function(item, i) {
      id = id+1;
      var bindEvents = function theOutterFunction() {     
        return function() {
        $( ".button-" + id ).click(function() {
        $( ".button-" + id ).toggle();
       }
      }();
      bindEvents();
});

Answer 5

你有一些很好的答案。但看起来你似乎错过了这么简单。您需要使用的是jQuery's .on方法。您可以查看此SO Q&A以获取有关设置动态事件的更多信息。

但是，总而言之，它意味着：＆＃34;将动态元素的事件分配给静态父级。＆＃34;有关"What is dynamic and static"的更多信息，请阅读此处。简而言之，在页面加载后创建动态方法。

所以从本质上讲，你可以使用answer给出的Jamie Phan，你只需要了解如何实现它。

你真正需要的是一个＆＃34; 静态父＆＃34;。这是加载页面时HTML中已存在的元素。我个人经常使用DOM对象，但是，最好的做法是拥有一个带有ID的亲密父母。例如，如果您的HTML看起来像：

<div>
    <h1>Dynamic buttons added below</h1>
    <ul id="divDyno"><!-- Buttons will be added here --></ul>
</div>

然后您的静态父级将为<div id="divDyno"...，可以使用字符串'#divDyno'进行选择。所以，你的代码看起来像这样：

$('#ulDyno').on('click', '[class*=button-]', function(e) {
    $(this).toggle();
})

以下是如何轻松实现这些技术的快速示例。我添加了一些内容，以便您可以看到它完整有效，但我会尝试深入解释所有内容。

修改为简单地切换按钮的类（又名更改状态）

＆＃13;

/** This will be the event fired when clicking on a "dynamically" created button **/
function button_click_event() {
	//	only need use "this", no need for ID.
	//	'this' is the button html element itself
	$(this).toggleClass('black white');
}

/** This event will dynamically create buttons **/
function create_button() {
		// first I get the length of how many buttons exist,
		// simply to add to the button text
	var len = $('ul li').length,
		//	then I create a <li> to append to the <ul>
		li = $('<li />').appendTo('ul'),
		//	then, of course, I create the <button> and add it to the <li>
		btn = $('<button />').text('Button '+len).addClass('button-'+len).appendTo(li);
	//	now we'll give the button a class for color
	btn.addClass(len%2 ? 'black': 'white')
}

/** This will simply show all "toggled" buttons **/
function show_buttons() {
	$('ul button').show();
}
$(function() {
	//	As per the previously mentioned example
	//	In jQuery, you can set events for a dynamic element by using a static parent.
	$('#ulDyno').on('click', '[class*=button-]', button_click_event)
	
	//	In the following case, I'll simply use the DOM for brevity,
	//		but it's still best to use a "static" element with an ID
	//	This event is simply for the "Add" button. To "dynamically" create buttons.
	$(document).on('click', '#btnAdd', create_button)// notice i didn't close with a ";"
		//	With no close, the return is "$(document)", So I can write more code attached to it.
		//	This event will show any "toggled" buttons
		.on('click', '#btnShow', show_buttons);
});

＆＃13;

html, body { font-size: 20px; width: 100%; }
html, body, table { height: 100%; margin: 0 auto; padding: 0; text-align: center; }
div { left: 1em; position: fixed; top: 1em; }
ul { margin: 0 auto; padding: 0; }
li { list-style: none; margin: .5em auto; padding: 0; }
button { padding: .5em .8em; }
.black { background-color: #000; color: #fff }
.white { background-color: #fff; color: #000 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div><button id="btnAdd">Add Buttons</button><button id="btnShow">Show All Buttons</button></div>
<table>
	<tr>
		<td>
			<br />
			<ul id="ulDyno"></ul>
		</td>
	</tr>
</table>

＆＃13;

jQuery切换动态创建的元素

5 个答案: