нужен совет, чтобы избежать нескольких функций

Question

нужен совет, чтобы избежать нескольких функций

0

Я пытаюсь написать функцию с помощью jQuery, которая позволяет мне показывать или скрывать DIV. Здесь образец кода, мне просто нужна помощь для повторной записи функции во избежание дублирования:

<ul id="link">
  <li>
    <a id="myLink1" href="javascript:;">Lister</a>
  </li>
  <li>
    <a id="myLink2" href="javascript:;">Afficher</a>
  </li>
</ul>

<div id="contenu">
<div id="myDiv1">             
  <p> Bienvenue </p> 
</div>
<div id="myDiv2">             
   <p> bob </p>
</div>
</div>

JAVASCRIPT

$(document).ready(function(){
       var par = $("#myDiv1");
       $(par).hide();
      $("#myLink1").click(function(e){
        $(par).toggle();
        e.preventDefault();
      });

    });

    $(document).ready(function(){
       var par = $("#myDiv2");
       $(par).hide();
      $("#myLink2").click(function(e){
        $(par).toggle();
        e.preventDefault();
      });

    });

JSFiddle

благодаря

caps lock 20 март 2014, в 18:13

Источник

Теги:

jquery

html

show-hide

3 ответа

Ещё вопросы

Romain Braun · Answer 1 · 2014-03-20T15-44-00.000Z

Сделайте это вместо этого:

$(document).ready(function () {
    $('a').click(function (e) {
        e.preventDefault();
        $($(this).attr('href')).toggle();
    });
});

Не забудьте добавить id div в ссылку href ссылки.

Работа jsFiddle: http://jsfiddle.net/jbv4Y/1/

Felix · Answer 2 · 2014-03-20T15-01-00.000Z

1) Вам просто нужен один готовый обработчик DOM $(document).ready(function(){...});

2) Вы можете использовать Attribute Starts With Selector [name ^ = "value"] для выбора элементов с указанным атрибутом со значением, начинающимся именно с данной строки.

3) Используйте .each(), чтобы пересечь все ссылки, где имя идентификатора начинается с myLink

4) Используйте match() с правильным регулярным выражением, чтобы получить идентификационный номер вашей ссылки, затем переключите div с этим номером идентификатора соответственно.

$(document).ready(function () {
    $('[id^="myDiv"]').hide();
    $('[id^="myLink"]').each(function () {
        $(this).click(function (e) {
            e.preventDefault();
            var id = $(this).attr('id').match(/\d+$/);
            $('#myDiv' + id).toggle();
        });
    });
})

Обновленный скрипт

Это хорошее общее решение, но для этого конкретного случая вы также можете просто перечислить фактические идентификаторы в селекторе, например, $('#myDiv1, #myDiv1').hide(); и т.д. С точки зрения производительности, это, вероятно, быстрее, если код должен был запускаться тысячи раз. ;)
Я не понимаю, почему DIV не скрыты, пока я вызываю функцию
Да, я сделал. Если я нажму "lister tout", то "afficher membre", div, который содержит "liste tout", не будет скрыт, почему?
Вам просто нужно добавить .siblings('div').hide() . Вот обновленная демоверсия: jsfiddle.net/jbv4Y/3

Arun P Johny · Answer 3 · 2014-03-20T15-15-00.000Z

Вы можете добавить несколько классов и href, чтобы нацелить элемент на переключение

<ul id="link">
    <li>
        <a id="myLink1" class="trigger" href="#myDiv1" >Lister tout</a>
    </li>
    <li>
        <a id="myLink2" class="trigger" href="#myDiv2">Afficher Membre</a>
    </li>
</ul>

<div id="contenu">
    <div id="myDiv1" class="target">             
        <p> Bienvenue </p> 
    </div>
    <div id="myDiv2" class="target">             
        <p> bob </p>
    </div>
</div>

тогда

$(document).ready(function () {
    //add the class target to add divs that are targeted by the links
    $(".target").hide();
    //all the links which need to trigger the toggle should have the class trigger
    $(".trigger").click(function (e) {
        e.preventDefault();
        //the href property of the link must have the id of the div to toggle prefixed with #
        $($(this).attr('href')).toggle()
    });
});

Демо: скрипка

Вы можете даже упростить его, используя основанное на индексах решение, подобное ниже, но я бы не рекомендовал его

<ul id="link">
    <li>
        <a id="myLink1" href="#" >Lister tout</a>
    </li>
    <li>
        <a id="myLink2" href="#">Afficher Membre</a>
    </li>
</ul>

<div id="contenu">
    <div id="myDiv1">
        <p> Bienvenue </p> 
    </div>
    <div id="myDiv2">
        <p> bob </p>
    </div>
</div>

тогда

$(document).ready(function () {
    var $targets = $("#contenu > div").hide();

    $("#link a").click(function (e) {
        e.preventDefault();

        $targets.eq($(this).parent().index()).toggle()
    });
});

Демо: скрипка

Это зависит от порядка элементов li в #link а содержимое в #contenu одинаково.

Можете ли вы объяснить мне, как скрыть другие Div, когда я нажму на одну ссылку?