Question

我正在搞乱内联属性并使用它们用jQuery触发事件，但我遇到了一个问题。

当元素具有属性self-toggle="dropdown"时，我试图触发控制台日志（在chrome中）。但由于我缺乏知识，我似乎无法让它发挥作用。

我的HTML（要测试的锚标记）：

<a href="#" self-toggle="dropdown">dropdown</a>
<a href="#">not dropdown</a>

我的jQuery：

$(document).ready(function() {
    $(this).on('click', function() {
        if($(this).attr('[self-toggle]') == "dropdown") {
            console.log('self-toggle: true');
        } else {
            console.log('self-toggle: false');
        };
    });
});

为什么这不起作用，jsFiddle？

Answer 1

请参阅http://jsfiddle.net/ykkya5Lj/1/

您不需要[和]属性名称，也不需要点击a元素。当您绑定到a点击时，$（this）将是您点击的链接。

   $('a').on('click', function() {
        if($(this).attr('self-toggle') == "dropdown") {
            console.log('self-toggle: true');
        } else {
            console.log('self-toggle: false');
        };
    });

Answer 2

您只需将属性名称传递给attr()

即可

$(document).ready(function() {
  $('a').on('click', function() {
    if ($(this).attr('self-toggle') == "dropdown") {
      log('self-toggle: true');
    } else {
      log('self-toggle: false');
    };
  });
});

var $log = $('#log');

function log(message) {
  $('<p/>', {
    html: message
  }).prependTo($log)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" self-toggle="dropdown">dropdown</a>
<a href="#">not dropdown</a>

<div id="log"></div>

jquery属性选择总是返回false？

2 个答案: