【问题标题】:Javascript/jQuery - How do I obtain name of the class of clicked element?Javascript/jQuery - 如何获取点击元素类的名称?
【发布时间】:2010-09-23 00:58:17
【问题描述】:

我用谷歌搜索和搜索,我得出的结论是,靠我自己很难得到答案。

我正在尝试使用 jquery 或 JavaScript 来获取单击元素的属性。例如,我可以使用“this.hash”——它返回我认为的哈希值。

现在我想获取点击元素类的名称。 甚至可能吗?如何?我在哪里可以找到此类信息?

  • jQuery 文档? - 我能找到的只有方法和插件,没有属性.. 如果有的话 - 请提供链接。

  • JavaScript 文档? - 有没有综合的?再次请一个链接。

  • DOM 文档? - 在 W3C 上或在哪里(链接赞赏)。

this.hash 是什么? - DOM JavaScript 还是 jQuery?

【问题讨论】:

    标签: javascript jquery dom


    【解决方案1】:

    在 jQuery 中,如果你将一个click 事件附加到所有<div> 标签(例如),你可以得到它的类:

    示例: http://jsfiddle.net/wpNST/

    $('div').click(function() {
        var theClass = this.className;  // "this" is the element clicked
        alert( theClass );
    });
    

    这使用jQuery's .click(fn) method分配处理程序,但直接从被点击的DOM元素访问className属性,由this表示。

    也有 jQuery 方法可以做到这一点,like .attr()

    示例: http://jsfiddle.net/wpNST/1/

    $('div').click(function() {
        var theClass = $(this).attr('class');
        alert( theClass );
    });
    

    在这里,我用 jQuery 对象包装了 DOM 元素,以便它可以使用 jQuery 提供的方法。 The .attr() method 这里获取设置的类。

    【讨论】:

      【解决方案2】:

      本示例适用于页面中的每个元素。我建议使用 console.log(event) 并使用 Firebug/Developer 工具查看它转储到控制台的内容。

      jQuery

      ​​>
      ​$(window).click(function(e) {
          console.log(e); // then e.srcElement.className has the class
      });​​​​
      

      Javascript

      window.onclick = function(e) {
          console.log(e); // then e.srcElement.className has the class
      }​
      

      试试看

      http://jsfiddle.net/M2Wvp/

      编辑
      为了澄清起见,您不必为e.srcElement.className 登录控制台来上课,希望这不会让任何人感到困惑。这是为了表明在函数中,它将具有类名。

      【讨论】:

      • srcElement 不是仅在 IE 中可用,target 在其他浏览器中可用吗? (source) 有没有结合这两个关键字的另一种选择?
      • 您的来源有var target = event.target || event.srcElement; 我相信应该可以。
      【解决方案3】:
      $(document).click(function(e){
          var clickElement = e.target;  // get the dom element clicked.
          var elementClassName = e.target.className;  // get the classname of the element clicked
      });
      

      这支持点击页面的任意位置。如果您点击的元素没有类名,它将返回 null 或空字符串。

      【讨论】:

        【解决方案4】:
        $('#ele').click(function() {
            alert($(this).attr('class'));
        });
        

        这里是所有的属性函数。

        http://api.jquery.com/category/attributes/

        【讨论】:

          【解决方案5】:

          你可以使用 element.className.split(/\s+/);为了给你一个类名数组,记住元素可以有多个类。

          然后你可以迭代所有这些并找到你想要的。

          window.onclick = function(e) {
              var classList = e.srcElement.className.split(/\s+/);
              for (i = 0; i < classList.length; i++) {
                 if (classList[i] === 'someClass') {
                   //do something
                 }
              }
          }
          

          jQuery 在这里并不能真正帮助你,但如果你必须这样做

          $(document).click(function(){
              var classList =$(this).attr('class').split(/\s+/);
              $.each( classList, function(index, item){
                  if (item==='someClass') {
                     //do something
                  }
              });
          });
          

          【讨论】:

            【解决方案6】:

            有一种方法可以在不编码的情况下做到这一点。只需打开浏览器的控制台(f12?)并转到您想要的元素。之后,悬停或单击要跟踪的项目。

            在 DOM 上所做的每个更改都会在几秒钟内被标记(或变亮)为控制台上的另一种颜色。 (观看屏幕截图)

            在示例中,每次我将鼠标悬停在“colorItem”上时,“div”父级和“colorItem”类都会变亮。所以在这种情况下,点击的类将是“swiper-model-watch”或“swiper-container”(减轻的 div 的类)

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 2015-04-14
              • 1970-01-01
              • 1970-01-01
              • 2012-05-05
              • 2011-08-05
              • 1970-01-01
              • 2020-07-10
              相关资源
              最近更新 更多