Дополнение - в математическом смысле слова - к "этому" в jQuery

#jquery #selector #this

#jquery #селектор #это

Вопрос:

Я создаю меню навигации таким образом, что при нажатии кнопки навигации он получает «выбранный» класс, в то время как этот класс одновременно удаляется из других кнопок. (Я также исчезаю на соответствующих страницах). Простой код:

 <html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style type="text/css">
ul li a.selected {font-weight:bold;}
div.page {position:absolute;}
</style>

<script type="text/javascript">
$(function(){
    $("div.page:not(:first)").hide();   // hide all pages except the home page

    $("ul li a").click(function(){
        var previous=window.location.hash;
        var selected=$(this).attr("href");
        if (previous != selected) {
            $("div.page" previous).fadeOut();
            $("div.page" selected).fadeIn();
            }
        $(this).addClass("selected")
        $("ul li a").not(this).removeClass("selected");
    });
});
</script>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="page" id="home">This is my home page.</div>
<div class="page" id="portfolio">This is my portfolio page.</div>
<div class="page" id="contact">This is my contact page.</div>
</body>
</html>

Хотя этот код действительно работает, я «эстетик кода» и не люблю вводить $ («ul li a») снова, ссылаясь на кнопки навигации; поскольку я уже ввел это в начале цепочки, кажется, я смогу получить его в общем виде без повторного ввода. По сути, я хочу выбрать относительное дополнение «this» в исходном выбранном наборе «ul li a». Есть ли общий способ сделать это?

Ответ №1:

Сохранение его в переменную:

 $elements = $("ul li a");
$elements.click(function(){
    // ...
    $elements.not(this).removeClass("selected");
});

Ответ №2:

Вы могли бы (должны) кэшировать результат $('ul li a') в первый раз и использовать его во второй;

 var elements = $("ul li a").click(function(){
    var previous=window.location.hash;
    var selected=$(this).attr("href");
    if (previous != selected) {
        var previousId=previous.substring(1);   // remove the hash symbol
        var selectedId=selected.substring(1);
        $("div.page#" previousId).fadeOut();
        $("div.page#" selectedId).fadeIn();
        }
    $(this).addClass("selected")
    elements.not(this).removeClass("selected");
});

Ответ №3:

сначала удалите «выбранный» класс из всего, а затем добавьте его в $(this):

 $('.selected').removeClass('selected')
$(this).addClass('selected')

Таким образом, вы можете быть уверены, что не повлияете на какие-либо несвязанные ul> li> a…

Ответ №4:

Нет — если все остальные элементы не являются братьями и сестрами $(this) , то jQuery не может узнать, что содержал этот селектор, если вы не кэшируете его.

Кэширование — хорошая идея всякий раз, когда вы используете селектор более одного раза:

 var $sel = $("ul li a"); // cache
$sel.click(function(){
    // other code ...
    $sel.not(this).removeClass("selected");
});