Дополнение - в математическом смысле слова - «это» в jQuery - PullRequest
Новая
       40

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

0 голосов
/ 25 октября 2011

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

<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». Есть ли общий способ сделать это?

Ответы [ 4 ]

3 голосов
/ 25 октября 2011

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

$elements = $("ul li a");
$elements.click(function(){
    // ...
    $elements.not(this).removeClass("selected");
});
1 голос
/ 25 октября 2011

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

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

var $sel = $("ul li a"); // cache
$sel.click(function(){
    // other code ...
    $sel.not(this).removeClass("selected");
});
1 голос
/ 25 октября 2011

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

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

Таким образом, вы можете быть уверены, что это не повлияет на любые несвязанные ul> li> a's ...

1 голос
/ 25 октября 2011

Вы можете ( следует ) кэшировать результат $('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");
});
...