Select 元素由 class 基于 attr 然后添加或删除 class
Select elements by class based on attr then add or remove class
对于我的一个项目,我想在单击按钮时存储导航菜单中每个元素的 data
信息。
我已经建立了一个具有两级导航的单页网站。
- 一个主菜单
- 每个 "page"
底部的按钮
我的问题是,当我使用主菜单时,我已经为 add/remove class "selected" 编写了一个脚本。所以到目前为止一切正常,但是当我也使用第二级导航时,我希望菜单 add/remove class "selected"。
这就是我目前被困的地方。
这是我的:
我的主菜单:
<nav>
<ul>
<li><a class="btn selected" href="#accueil" data-scrollOptions="accueil">accueil</a></li>
<li><a class="btn" href="#apropos" data-scrollOptions="apropos">à propos</a></li>
<li><a class="btn" href="#nosprojets" data-scrollOptions="nosprojets">nos projets</a></li>
<li><a class="btn" href="#contact" data-scrollOptions="contact">contact</a></li>
</ul>
</nav>
"page"中的按钮:
<span class="scrolldown"><a href="#apropos" data-scroll="apropos">ScrollDown</a></span>
<span class="scrolldown"><a href="#nosprojets" data-scroll="nosprojets">ScrollDown</a></span>
<span class="scrolldown"><a href="#contact" data-scroll="contact">ScrollDown</a></span>
我的第一个脚本:(有效)
// onClick - class distribution
$(".btn").click(function () {
$(".btn").removeClass("selected");
$(this).addClass("selected");
});
我的第二个脚本:(不工作)
// onClick - dataTrigger
$(".scrolldown").click(function() {
$('.btn').each(function () {
var myArray =[];
var attributs = $('.btn').data('scroll-options');
myArray.push(attributs);
console.log(myArray);
});
});
如何将每个值 (accueil
、apropos
、nosprojets
、contact
) 推送到数组中,然后将其用于 add/remove class?
$('.btn').each(function () {
var myArray =[];
var attributs = $('.btn').data('scroll-options');
myArray.push(attributs);
console.log(myArray);
});
您可能希望使用 'this' 上下文来解决您的问题。当您处于 'each' 循环中时,此行:
var attributs = $('.btn').data('data-scrollOptions');
不会 select 一个项目。事实上,在这种情况下,它可能返回第一个 $('.btn') 项的数据值。
要访问每个值,您可以这样做:
var attribut = $(this).data('data-scrollOptions');
'this' 指的是当前上下文。在我们的例子中,它是每个循环中单个 'btn' 项目的范围。希望这有帮助。
也许您将执行此操作的方法过于复杂化了。有很多不同的方法可以做到这一点,并且您可以使用许多不同的事件(所以不要因为我没有这样做而开枪 "their preferred way")。但你可以这样做。
$('.scrolldown').on('click', function(){
$('.btn', 'nav').removeClass('selected');
$('.btn[href="'+$('a',this).attr('href')+'"]','nav').addClass('selected');
});
(function($) {
$('.scrolldown').on('click', function() {
$('.btn', 'nav').removeClass('selected');
$('.btn[href="' + $('a', this).attr('href') + '"]', 'nav').addClass('selected');
});
})(jQuery);
.selected {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><a class="btn selected" href="#accueil" data-scrollOptions="accueil">accueil</a>
</li>
<li><a class="btn" href="#apropos" data-scrollOptions="apropos">à propos</a>
</li>
<li><a class="btn" href="#nosprojets" data-scrollOptions="nosprojets">nos projets</a>
</li>
<li><a class="btn" href="#contact" data-scrollOptions="contact">contact</a>
</li>
</ul>
</nav>
<div>
<span class="scrolldown"><a href="#apropos" data-scroll="apropos">ScrollDown</a></span>
<span class="scrolldown"><a href="#nosprojets" data-scroll="nosprojets">ScrollDown</a></span>
<span class="scrolldown"><a href="#contact" data-scroll="contact">ScrollDown</a></span>
</div>
</div>
对于我的一个项目,我想在单击按钮时存储导航菜单中每个元素的 data
信息。
我已经建立了一个具有两级导航的单页网站。
- 一个主菜单
- 每个 "page" 底部的按钮
我的问题是,当我使用主菜单时,我已经为 add/remove class "selected" 编写了一个脚本。所以到目前为止一切正常,但是当我也使用第二级导航时,我希望菜单 add/remove class "selected"。 这就是我目前被困的地方。
这是我的:
我的主菜单:
<nav>
<ul>
<li><a class="btn selected" href="#accueil" data-scrollOptions="accueil">accueil</a></li>
<li><a class="btn" href="#apropos" data-scrollOptions="apropos">à propos</a></li>
<li><a class="btn" href="#nosprojets" data-scrollOptions="nosprojets">nos projets</a></li>
<li><a class="btn" href="#contact" data-scrollOptions="contact">contact</a></li>
</ul>
</nav>
"page"中的按钮:
<span class="scrolldown"><a href="#apropos" data-scroll="apropos">ScrollDown</a></span>
<span class="scrolldown"><a href="#nosprojets" data-scroll="nosprojets">ScrollDown</a></span>
<span class="scrolldown"><a href="#contact" data-scroll="contact">ScrollDown</a></span>
我的第一个脚本:(有效)
// onClick - class distribution
$(".btn").click(function () {
$(".btn").removeClass("selected");
$(this).addClass("selected");
});
我的第二个脚本:(不工作)
// onClick - dataTrigger
$(".scrolldown").click(function() {
$('.btn').each(function () {
var myArray =[];
var attributs = $('.btn').data('scroll-options');
myArray.push(attributs);
console.log(myArray);
});
});
如何将每个值 (accueil
、apropos
、nosprojets
、contact
) 推送到数组中,然后将其用于 add/remove class?
$('.btn').each(function () {
var myArray =[];
var attributs = $('.btn').data('scroll-options');
myArray.push(attributs);
console.log(myArray);
});
您可能希望使用 'this' 上下文来解决您的问题。当您处于 'each' 循环中时,此行:
var attributs = $('.btn').data('data-scrollOptions');
不会 select 一个项目。事实上,在这种情况下,它可能返回第一个 $('.btn') 项的数据值。
要访问每个值,您可以这样做:
var attribut = $(this).data('data-scrollOptions');
'this' 指的是当前上下文。在我们的例子中,它是每个循环中单个 'btn' 项目的范围。希望这有帮助。
也许您将执行此操作的方法过于复杂化了。有很多不同的方法可以做到这一点,并且您可以使用许多不同的事件(所以不要因为我没有这样做而开枪 "their preferred way")。但你可以这样做。
$('.scrolldown').on('click', function(){
$('.btn', 'nav').removeClass('selected');
$('.btn[href="'+$('a',this).attr('href')+'"]','nav').addClass('selected');
});
(function($) {
$('.scrolldown').on('click', function() {
$('.btn', 'nav').removeClass('selected');
$('.btn[href="' + $('a', this).attr('href') + '"]', 'nav').addClass('selected');
});
})(jQuery);
.selected {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><a class="btn selected" href="#accueil" data-scrollOptions="accueil">accueil</a>
</li>
<li><a class="btn" href="#apropos" data-scrollOptions="apropos">à propos</a>
</li>
<li><a class="btn" href="#nosprojets" data-scrollOptions="nosprojets">nos projets</a>
</li>
<li><a class="btn" href="#contact" data-scrollOptions="contact">contact</a>
</li>
</ul>
</nav>
<div>
<span class="scrolldown"><a href="#apropos" data-scroll="apropos">ScrollDown</a></span>
<span class="scrolldown"><a href="#nosprojets" data-scroll="nosprojets">ScrollDown</a></span>
<span class="scrolldown"><a href="#contact" data-scroll="contact">ScrollDown</a></span>
</div>
</div>