jquery脚本的javascript变量

Question

我根本不懂Javascript，很抱歉提出这样的问题......

这就是我所拥有的：

$(document).ready(function(){$("#more0").click(function(){$("#update0").slideToggle("normal");});});
$(document).ready(function(){$("#more1").click(function(){$("#update1").slideToggle("normal");});});
$(document).ready(function(){$("#more2").click(function(){$("#update2").slideToggle("normal");});});
$(document).ready(function(){$("#more3").click(function(){$("#update3").slideToggle("normal");});});
$(document).ready(function(){$("#more4").click(function(){$("#update4").slideToggle("normal");});});
$(document).ready(function(){$("#more5").click(function(){$("#update5").slideToggle("normal");});});
$(document).ready(function(){$("#more6").click(function(){$("#update6").slideToggle("normal");});});
$(document).ready(function(){$("#more7").click(function(){$("#update7").slideToggle("normal");});});
$(document).ready(function(){$("#more8").click(function(){$("#update8").slideToggle("normal");});});  
$(document).ready(function(){$("#more9").click(function(){$("#update9").slideToggle("normal");});});
$(document).ready(function(){$("#more10").click(function(){$("#update10").slideToggle("normal");});});
And So On.. Until #more30 and #update30...

所以...现在，我的页面有 30 行 :)

有没有办法让它变得不那么复杂？

谢谢！

Answer 1

使用 attribute selector ^= 。 [attribute^=value]选择器用于选择属性值以指定值开头的元素。

$(document).ready(function(){
         $("[id^='more']").click(function(){
                $("#update" + $(this).attr('id').slice(4)).slideToggle("normal");
         });
});

Answer 2

尝试使用attribute starts with selector选择id以more开头的所有元素，然后使用正则表达式从中提取数值并与update连接以形成所需元素的id并继续，

$(document).ready(function(){
    $("[id^='more']").click(function(){
      var index = $(this).attr('id').match(/\d+/)[0];
      $("#update" + index).slideToggle("normal");
    });
});

Answer 3

使用 attribute start with selector

$(document).ready(function(){
         $("[id^='more']").click(function(){
                $("[id^='update']").slideToggle("normal");
         });
});

Answer 4

 //select all elements that contain 'more' in their id attribute. 
$('[id^=more]').click(function(){
        //get the actual full id of the clicked element.
        var thisId = $(this).attr("id");
        //get the last 2 characters (the number) from the clicked elem id
        var elemNo= thisId.substr(thisId.length-2);             
         //check if last two chars are actually a number
        if(parseInt(elemNo))
        {
         var updateId = "#update"+elemNo;//combine the "#update" id name with number e.g.5
        }
        else
       {
         //if not, then take only the last char
          elemNo= thisId.substr(thisId.length-1);
          var updateId = "#update"+elemNo;
        }
        //now use the generate id for the slide element and apply toggle. 
        $(updateId).slideToggle("normal");
});

Answer 5

首先，您可以将多个就绪事件处理程序注册替换为一个，例如

$(document).ready(
    $("#more0").click(function(){$("#update0").slideToggle("normal");});
    //...
);

然后，由于您的按钮/链接具有几乎相同的功能，我建议将它们合并到单击事件处理程序注册中：

$(document).ready(
    $(".generic-js-hook-class").click(function(){
        var toggleContainer = $(this).data('toggleContainer');
        $(toggleContainer).slideToggle("normal");
    });
);

上述解决方案使用 HTML 数据属性来存储要切换的元素的信息，并要求您更改相应的 HTML，如下所示：

<div class=".generic-js-hook-class" data-toggle-container="#relatedContainer">Click me</div>
<div id="relatedContainer>Toggle me</div>

Answer 6

我建议您使用Custom Data Attributes (data-*)。在这里，您可以将要切换的元素存储在以后可以获取和使用的数据属性中。

JavaScript，在事件处理程序中，您可以使用 .data() 来获取这些值。

$(document).ready(function () {
    $(".more").click(function () {
        $($(this).data('slide')).slideToggle("normal");
    });
});

HTML

<div class="more" data-slide="#update1">more1</div>
<div class="more" data-slide="#update2">more2</div>
<div id="update1">update1</div>
<div id="update2">update2</div>

DEMO