Question

所以，我遵循jQuery（Ajax）。

jQuery("button1").click(function(){
    jQuery("#div1").load("demo_test.txt");
});
jQuery("button2").click(function(){
    jQuery("#div2").load("demo_test.txt");
});
jQuery("button3").click(function(){
    jQuery("#div3").load("demo_test.txt");
});
jQuery("button4").click(function(){
    jQuery("#div4").load("demo_test.txt");
});
jQuery("button5").click(function(){
    jQuery("#div5").load("demo_test.txt");
});

如您所见，我有5个按钮和5个div。

有没有办法缩小这个jQuery函数？

由于

Answer 1

您可以使用the 'Attribute Starts With' selector检查以＆＃34;按钮＆＃34;开头的名称。

列出了所有jQuery的选择器here。

这样的事情可以做你所要求的。这可能是一种更优雅的方式。

jQuery("button[name^='button']").click(function(){
    var lastChar = this.name.substr(this.name.length - 1);
    $("#div"+lastChar).text("Clicked");
});

Answer 2

??是的，有

for (var i=1;i<6;i++) {
  jQuery("button"+i).click(function(){
    jQuery("#div"+i).load("demo_test.txt");
  });
}

但这可能不是你想要的。请详细说明问题。

Answer 3

假设您的 divs 具有不同的目的，因此它们需要不同。

有很多方法可以实现这一目标。一个人会使用for，但对于这些情况通常不是一个好习惯。

您可以将按钮设置为属于同一个类，然后根据$(this)的相关元素（例如parent）选择 div 。您没有发布 html 代码，因此我假设您的 div 包含您的按钮。

<强> JS

jQuery(".mybtnclass").click(function(){
    var mydiv = $(this).parent('div');
    jQuery(mydiv).load("demo_test.txt");
});

<强> HTML

<div>
   <button class="mybtnclass" value="click me1" />
</div>

<div>
   <button class="mybtnclass" value="click me2" />
</div>

这将定位容器 div 并覆盖其内容，从而删除单击的按钮。

另一种（更复杂的）方法是使用 data html属性和 div，通过元素的 id 来定位div 可以在文档中的任何位置使用，不一定包含按钮。

<强> JS

jQuery(".mybtnclass").click(function(){
    var mydiv = $(this).data('banner');
    jQuery('#'+mydiv).load("demo_test.txt");
});

<强> HTML

<button class="mybtnclass" value="click me1" data-banner="banner1" />
<div id="banner1"></div>

<button class="mybtnclass" value="click me2" data-banner="justanothername" />
<div id="justanothername"></div>

压缩jQuery功能

3 个答案: