巩固jQuery代码

我有30个按钮，范围从#p3-btn到#p30-btn，当点击时使.p3 div一直达到.p30 div会产生不同的效果。我如何合并这段代码，所以我不必从字面上复制和粘贴30次以下的代码并更改ID和类？巩固jQuery代码

$('#p3-btn').click(function() { 
    $('.p3').fadeIn().delay(2000).fadeOut(); 
    });

干杯。

来源

2017-10-10 asdf

是否有某种方式来识别所有这些按钮，而无需使用单独的'id'值？例如，他们是否共享一个'class'值？ *他们可以吗？它们是可识别父容器元素的子元素吗？还有别的吗？如果他们从字面上完成同样的事情，那么肯定不需要* 30 *点击处理程序。 – David

好问题，但请张贴您的HTML以及在堆栈片段/ jsfiddle –

这是在编程中DRY（不要重复自己）概念的一个很好的例子。其中一个解决它的办法就是让与您将用来指元素的ID和类的其他元素，例如ID参数的函数：

function attachClick(id){ 
    $('#' + id + '-btn').click(function() { 
    $('.' + id).fadeIn().delay(2000).fadeOut(); 
    }); 
}

然后，只需调用功能（比如，从一个for循环）是这样的：

attachClick('p30');

虽然上面的例子是一个1：1的匹配与您现有的代码，一个更好的办法是找到一个每个按钮与其影响的元素之间的关系，以避免将监听器附加到每个按钮individua lly，而是将一个监听器附加到一个父元素，并让事件处理函数负责其余部分。但是，如果没有看到您的标记，我无法告诉您是否可以在不重写的情况下执行此操作。例如，如果您有类似这样的标记，这将是微不足道的实施：

<div class="container"> 
    <button>Button</button> 
    <div>Div to be affected</div> 
</div>

来源

2017-10-10 12:24:43 Shomz

更简单的说Shomz的anwser，你可以使用jQuery选择：

$('button[id^="p"][id$="-btn"]').on("click", function() { 
    var id = $(this).attr("id").replace("-btn", "").replace("p", ""); 
    $('.p' + id).fadeIn().delay(2000).fadeOut(); 
});

哪里$('button[id^="p"][id$="-btn"]')允许您选择元素键入button，其中id以'p'开头并以'-btn'结尾。

来源

2017-10-10 12:32:19 GGO

您可以使用属性选择器来实现此目的。

function createDivs(len) { 
 
    var $div = $('<div>'); 
 
    for (var i = 0; i < len; i++) { 
 
    var prefix = 'p' + i; 
 
    var $inner = $('<div>'); 
 
    $inner.attr('id', prefix + '-btn') 
 
    var $p = $('<p>'); 
 
    $p.text(i).addClass(prefix); 
 
    $inner.append($p); 
 
    $div.append($inner); 
 
    } 
 
    return $div; 
 
} 
 
$(function() { 
 
    $('.content').append(createDivs(30)); 
 

 
    $('[id^="p"][id$="-btn"]').on('click', function() { 
 
    $(this).find('[class^=p]').fadeOut().delay(2000).fadeIn(); 
 
    }); 
 
})

[id$="-btn"] { 
 
    width: 100%; 
 
    border: 1px solid gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class='content' />

来源

2017-10-10 12:34:17 Rajesh

巩固jQuery代码

回答

相关问题