9

我的 JavaScript 文件的大小变得失控，因为我有数百个链接，每个链接都有自己的 jQuery 函数，尽管它们都执行基本相同的任务。

这是一个简短的摘录：

$("#link1").click(function ()
{
  $(".myDiv").hide();
  $("#myDiv1").toggle();
});

$("#link2").click(function ()
{
  $(".myDiv").hide();
  $("#myDiv2").toggle();
});

$("#link3").click(function ()
{
  $(".myDiv").hide();
  $("#myDiv3").toggle();
});

有没有办法抽象出一些这种逻辑，这样我就只有一个函数，而不是数百个做同样事情的函数？

4

9 回答 9

12

您可以向所有执行相同操作的链接添加一个类，并在该类上使用 jQuery。

<a href='whatever' id='link_1' class='toggler'>text</a>
<a href='whatever' id='link_2' class='toggler'>text</a>

jQuery 代码将是：

$(".toggler").click( function(){
    // toggle the divs
    var number = $(this).attr("id").split('_')[1];
    $(".myDiv").hide();
    $("#myDiv"+ number).toggle();
});
于 2009-07-08T19:21:50.363 回答
3

我使用的一般方法是使用遍历方法来查找相关元素，而不是使用绝对选择器。这将允许您将相同的代码应用于类似配置的元素，而不会对 id 的格式等有任何复杂的依赖关系。正确完成它对于标记的微小更改也相当稳健。

例如，假设我有一系列链接，每个链接后面都有一个 div，单击该链接将切换该 div。每个链接都有一个特定的类，因此可以轻松引用它们。

<a href="#" class="linkClass">Toggle</a>
<div>
     Some content...
</div>

<a href="#" class="linkClass">Toggle</a>
<div>
     Other content
</div>

然后我会按类查找所有链接，然后使用该next方法查找关联的 div 并切换它的可见性。请注意，这是一个简单的示例。您可能还需要使用更复杂的遍历机制并按元素类型或类进行过滤，具体取决于您的确切标记。

$('.linkClass').click( function() {
    $(this).next().toggle();
});
于 2009-07-08T19:25:13.820 回答
3

将目标的 ID 添加到链接的 href 中怎么样？

<a id="link1" href="#myDiv1" class="toggle">Toggle 1</a><br/>
<a id="link2" href="#myDiv2" class="toggle">Toggle 2</a><br/>
<a id="link3" href="#myDiv3" class="toggle">Toggle 3</a><br/>

然后你可以像这样编写一个函数：

$(".toggle").click(function(e) {
    e.preventDefault();
    $(".myDiv").hide();
    $($(this).attr('href')).toggle();
});

或者我用过的另一种方法：

$(".toggle").each(function(i) {
    $(this).click(function(e) {
        e.preventDefault();
        $(".myDiv").hide();
        $(".myDiv:eq("+i+")").toggle();
    });
});

这与 tvanfosson 的想法一脉相承，使用某种 DOM 关系来链接元素，在这种情况下，假设链接元素和 div 元素在页面上的顺序相同。

于 2009-07-08T19:27:11.537 回答
1

您可以让每次点击调用一个外部函数并为数字字符串传递一个参数。

前任：

$("#link1").click(toggle("1"));
$("#link2").click(toggle("2"));

function toggle(number) {
    $(".myDiv").hide();
    $("#myDiv"+number).toggle();
}
于 2009-07-08T19:17:12.213 回答
1 
function makeToggler(number) {
    $('#link' + number).click(function() {
        $('.myDiv').hide();
        $('#myDiv' + number).toggle();
    });
}

makeToggler(1);
makeToggler(2);
makeToggler(3);

您可以对其进行调整以满足您的命名标准。

根据您的 div 和链接的结构，有更好的方法来做到这一点。如果您发布元素的结构，我将向您展示一个。

于 2009-07-08T19:25:23.133 回答
0

我认为这是一个简单的重构

你可以这样定义一个函数

function doSomethingTo(thisDiv)
{
   $(".myDiv").hide();
   $(thisDiv).toggle();
}

然后在需要的地方重复使用它

$("#link1).click(doSomethingTo(thisDiv));
$("#link2).click(doSomethingTo(thisDiv));
于 2009-07-08T19:18:29.480 回答
0

基于 Craig 的解决方案：

$("#link1, #link2").click(toggle(this));

function toggle(obj) {
    $(".myDiv").hide();
    $("#myDiv" + $(obj).attr("id").replace('link','')).toggle();
}
于 2009-07-08T19:22:13.000 回答
0

我将链接更改为这样（我将 id 重命名为一个数字）

<a href='#test1' id='1' class='link'> ... </a>
<a href='#test2' id='2' class='link'> ... </a>
<a href='#test3' id='3' class='link'> ... </a>

然后在js上：

$(document).ready(function(){
    $('.link').click(function(){
      $('.myDiv').hide();
      var id = $(this).attr('id'); // take the id
      $('#myDiv'+id).toggle(); 
    });
});
于 2009-07-08T19:23:11.780 回答
0

把你的 makeToggle 扔进一个循环？

function makeToggler(number) {
    $('#link' + number).click(function() {
        $('.myDiv').hide();
        $('#myDiv' + number).toggle();
    });
}

for(i=1;i>=#;i++) {makeToggler(i);}

那么你甚至可以让它为你计算你的链接，链接这个？：

function countElementsByClass(className){
  var count = 0;
  var o = document.getElementsByTagName("a").className;
  for(var i=0;i<o.length;i+){
      if(o[i].className == "accordion/whatever")
          count ++;
      }

  return count;
}

信用：建立在 SLaCKS 解决方案之上

于 2009-07-08T20:30:00.833 回答