Jquery - определение ссылки, по которой щелкнули - PullRequest
1 голос
/ 18 января 2012

У меня есть несколько похожих ссылок, которые вызывают появление различных навигационных элементов. Я пытаюсь найти способ в JQuery определить, какая из ссылок была нажата, а затем вызвать соответствующие функции открытия / закрытия. HTML-код:

<a href="" id="nav1">1</a>
<a href="" id="nav2">2</a>
<a href="" id="nav3">3</a>

<div id="hidden1">nav links 1</div>
<div id="hidden2">nav links 2</div>
<div id="hidden3">nav links 3</div>

В настоящее время я использую простой переключатель, назначенный каждой паре, но хотел бы настроить его так, чтобы, когда кто-то открывает скрытый div и затем нажимает другой, первый закрывается.

Добавлено ... Приношу свои извинения за то, что не объяснил более подробно мои цели ... В навигационном меню есть три пункта, которые необходимо изменить при нажатии на ссылку. Сама ссылка изменяет переход css с текста на активную «вкладку», скрытая навигация переключается между скрытием и показом, наложение div также переключается между скрытием и показом. Когда кто-то нажимает на ссылку, он должен показать наложение и скрытый div и изменить ссылки css на активные. Если они снова нажмут на эту ссылку, она должна вернуться назад. Эту часть легко сделать. Задача возникает (по крайней мере, для меня), если у них есть первое скрытое открытие, а затем нажмите третью ссылку, я хочу, чтобы первое скрытое закрылось, и его ссылка вернулась в нормальное состояние css, а третье скрытое было открыто, а ссылка была изменена на активен, но я хочу, чтобы белый оставался открытым (не включайте / выключайте, создавая мерцание). ...

Я думал, что это может сработать, но, увы, не повезло:

$("#nav1,#nav2,#nav3").click(function(e)
{ 
//determine nav id ...
var nav_id = $(this).attr('id').match(/\d+/);
});

В конечном счете, план состоит в том, чтобы определить нажатую навигационную ссылку, а затем проверить, виден ли фоновый оверлей. Если нет, то откройте навигационные ссылки, парные скрытые div и оверлей. Если это так, то проверьте, открыт ли скрытый div с тем же nav_id, если так, то закройте все или, если нет, закройте все скрытые div и откройте спаренный скрытый div.

Ответы [ 5 ]

2 голосов
/ 18 января 2012

Я собираюсь выйти из этого положения и предложить, чтобы вместо непрерывного написания кода, который работает с вашей разметкой, структурируйте вашу разметку так, чтобы ваш код работал автоматически.

Вы должны пометить все ваши навигационные ссылки общим классом вместо идентификатора:

<a href="#" class="navlink">Link 1</a>
<a href="#" class="navlink">Link 2</a>
<a href="#" class="navlink">Link 3</a>

и все ваши скрытые элементы в подобной манере:

<div class="navhidden">foo</div>
<div class="navhidden">bar</div>
<div class="navhidden">herp</div>

Теперь ваш код может быть таким простым:

jQuery(function($) {

    var $navlinks = $('.navlink'),
        $navhiddens = $('.navhidden'),
        $overlay = $('#overlay');

    $navlinks.on('click', function (e) {

        // this is your link
        $link = $(this);

        // get my hidden div + toggle
        $my_navhidden = $navhiddens
            .eq($navlinks.index(this))
            .toggle();

        // hide all the other navhiddens 
        $navhiddens.not($my_navhidden).hide();

        // hide or show the overlay?
        if ($navhiddens.filter(':visible').length > 0) {
            $overlay.show();
        } else {
            $overlay.hide();
        } 

    });

});

Преимущество заключается в том, что вы можете добавлять больше ссылок + скрытых ссылок в вашу разметку, не меняя ничего в вашем коде. Кроме того, насколько легко добавить что-то вроде .navhidden { display:none; } в свой CSS, чтобы скрыть все?

Вместо изменения $('#nav1,#nav2,#nav3') на $('#nav1,#nav2,#nav3,#nav4') и так далее и так далее при добавлении новой ссылки используйте время, чтобы получить себе чашку кофе. Вы можете использовать Javascript / jQuery для определения порядкового индекса элемента в любом случае; практически нет необходимости отмечать элементы DOM порядковыми последовательностями, такими как nav1 nav2 nav3 ... navn.

Примечание: синтаксис .on: jQuery 1.7.x . Если вы не используете это, измените это на .bind.

EDIT

Добавлено немного кода для логического включения и выключения наложения. Это не самый элегантный, но вы получите суть.

1 голос
/ 18 января 2012

Как насчет чего-то , такого как jsFiddle ?

При нажатии на ссылку отображается соответствующий элемент div, а все остальные скрыты.

$('#hidden1,#hidden2,#hidden3').hide();
$("#nav1,#nav2,#nav3").click(function(e)
{
    e.preventDefault();
    $('#hidden1,#hidden2,#hidden3').hide();
    $('div:eq('+$(this).index()+')').show();
});
1 голос
/ 18 января 2012

вы можете использовать rel

html:

<a rel="div_id_to_open1" class="expander">Click me</a>
<a rel="div_id_to_open2" class="expander">Click me</a>
<a rel="div_id_to_open3" class="expander">Click me</a>

<div id="div_id_to_open1">Foo</div>
<div id="div_id_to_open2">Foo</div>
<div id="div_id_to_open3">Foo</div>

javascript:

$('.expander').click(function(e) {
   $('#' + $(this).attr('rel')).toggle();
   e.preventDefault();
   return false;
});

Вы можете использовать .index (), если хотите знатьОтносительное положение клика, по которому щелкают, необходимо обернуть якоря, хотя:

jsfiddle

0 голосов
/ 10 ноября 2018

Это моя html страница (шаблон Django):

<div class="col">
    {% for blog in blogs %}
    <div class="post">
        <h3><a href="{% url 'blog:detail' pk=blog.pk %}">{{ blog.title }}</a></h3>
        <div class="date">
            <p>Created: {{blog.date_created|date:'d M Y'}}</p>
        </div>
        <p>{{ blog.brief|safe }}</p>  

        <ul class="nav justify-content-end">
            <li class="nav-item">
              <a class="nav-link active" href="{% url 'blog:edit' pk=blog.pk %}">Edit</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="publish" href="{{blog.pk}}">Publish</a>
            </li>
            <li class="nav-item">
                <a class="btn btn-danger" id="remove" href="{{blog.pk}}">Remove</a>
            </li>
          </ul>
        <br>
    </div>
    {% endfor %}
</div>

В моем файле javascript это то, что есть, и оно работает.

$(document).ready(function() {

    console.log("document is ready!!!")

    $('#id_bloglist').on("click", 'a#publish,a#remove', function(e) {

    e.preventDefault()

    var pk = $(this).attr("href")

    if ($(this)[0].id == 'remove'){
        console.log("remove link clicked, calling deleteBlog with pk = " + pk)
    }
    else if ($(this)[0].id == 'publish'){
        console.log("publish link clicked, calling publishBlog with pk = " + pk)
    }

    return false;
   });
});
0 голосов
/ 18 января 2012

Предложение Андреаса звучит правильно - атрибут rel весьма полезен для такого типа вещей и является правильным вариантом, если у вас есть контроль над элементами.

Что касается вашего исходного метода, то он долженработать так же (несмотря на добавленные регулярные выражения).Просто помните, что совпадение вернет массив или ноль.Если вы откажетесь от нулевой проверки, вы будете использовать что-то вроде:

var nav_id = $(this).attr('id').match(/\d+/)[0];

Еще один совет: указание типа элемента в селекторе jQuery является хорошей практикой для ускорения времени загрузки.Например: $ ('a # nav1') против $ ('# nav1'), $ ('a.expander') против $ ('. expander')

...