Как я могу уменьшить дублирования в своем коде jQuery?

The general approach that I use is to use the traversal methods to find related elements rather than using absolute selectors. This will allow you to apply the same code to elements that are similarly configured without any complicated dependencies on the format of the ids, etc. Done correctly it's also reasonably robust against minor changes to the mark up.

For example, say I have a series of links, each followed by a div that will be toggled by clicking on that link. The links each have a particular class so they can easily be referenced.

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

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

I would then find all the links by class, then use the next method to find the associated div and toggle it's visibility. Note that this is a simple example. You may need to use more complicated traversal mechanisms and filter by element type or class, too, depending on your exact mark up.

$('.linkClass').click( function() {
    $(this).next().toggle();
});

А что насчет добавления идентификатора вашей цели в 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();
    });
});

Эта идея в том же духе, что и идея Тванфоссона, с использованием некоторого рода отношения DOM для связывания элементов, в данном случае предполагая, что элементы ссылки и элементы div расположены на странице в одном порядке.

Вы можете просто заставить каждый щелчок вызывать внешнюю функцию и передавать параметр для числовой строки.

Пример:

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

function toggle(number) {
    $(".myDiv").hide();
    $("#myDiv"+number).toggle();
}

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

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

You can adapt this to meet your naming standards.

Depending on the structure of your divs and links, there are better ways to do it. If you post the structure of your elements, I'll show you one.

Я думаю это простой рефакторинг

, вы можете определить функцию как таковую

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

, а затем просто повторно использовать ее там, где она вам нужна

$("#link1).click(doSomethingTo(thisDiv));
$("#link2).click(doSomethingTo(thisDiv));

Основываясь на решении Крейга:

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

function toggle(obj) {
    $(".myDiv").hide();
    $("#myDiv" + $(obj).attr("id").replace('link','')).toggle();
}

Я изменяю ссылку, чтобы она стала такой (я переименовываю идентификатор в просто число)

<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(); 
    });
});

попробуйте вот так: