javascript - Jquery 如果 ID 等于 "X"或 "Y"不运行函数

标签 javascript jquery html css

基本上,我想知道如果 id 等于“x”或“y”,是否有办法绕过/关闭/不执行函数。

我已经安装了这个功能,可以将 anchor 链接动画化到页面上各自的区域/ anchor 。即,如果我点击按钮,它会将页面向下移动到按钮所引用的区域。

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {

    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
        window.location.hash = target;
    });
});

...它适用于任何带有 # 的 href。

我需要在同一页面上使用 SCSS 功能添加一个显示更多区域。我在这里添加了示例:https://codepen.io/ojbravo/pen/YPJpXe

它自己工作,但使用上面的动画,因为它在 href 区域有一个#。因此,页面在“显示更多”之前会上下摆动。我讨厌它并希望它消失

我想做的是在点击链接时关闭页面上这两个 ID 为“show-rm”和“hide-rm”的链接的 anchor 动画。

这是页面上的代码:

<div class="panel-wrapper-rm">
<a href="#show-rm" class="show-rm btn-rm" id="show-rm">Show Full Article</a> 
<a href="#hide-rm" class="hide-rm btn-rm" id="hide-rm">Hide Full Article</a> 
<div class="panel-rm">

<p>fkjadsljfal;s kadfjas jkdajfkl;das jfklajfkl;a jadkljfkadl jdjfl;da
   jk fl;kadjf kl;asdjfkl jdaklfj akl;jd flk;ajd l;kjflk;adj
   fkl;adjfkdj kl;adjfklda jlkajflka jlk;fj daklsjfkldj kaljfkl;adj
   kl;fjadl ;jfal;jd fklj fkasjf l;kajalk;j fkl;dj klajdfakls;d
   jfl;akdfj adkjfl ajfd
</p>



 </div><!-- end panel -->
 <div class="fade-rm"></div>
</div><!-- end panel-wrapper -->  

最佳答案

您可以使用 :not选择器从您的选择器中排除一些选择

$('a[href^="#"]:not(#show-rm,#hide-rm)')

或者清洁工.not方法

The .not() method will end up providing you with more readable selections than pushing complex selectors or variables into a :not() selector filter. In most cases, it is a better choice.

$('a[href^="#"]').not('#show-rm,#hide-rm')

关于javascript - Jquery 如果 ID 等于 "X"或 "Y"不运行函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39798756/

相关文章:

javascript - 使用jquery动态显示 TableView

javascript - 动态数据处理之Highcharts问题

javascript - 如何让页面在没有焦点的情况下不休眠?

javascript - 如何将 div 放置在具有绝对位置的元素旁边?

html - 为什么 margin-top 对于 chrome 和 safari 不同?

java - 使用 Apache POI 来自 Excel 的 HTML 格式化单元格值

security - 使用 POST 而不是 GET 更安全吗?

javascript - 通过拖动调整 Bootstrap 列的大小

javascript - 动画和 DOM 重新排序后清除样式属性

javascript - 如何检查表单元素是否为空?