Question

我很好奇你如何找到用户点击的div中写的内容，然后根据他们点击的内容编写if，else if，else语句来运行不同的代码块，例如，如果这是你的HTML代码......

<html>
  <div>
    hello world!
  </div>

  <div>
    what's going on?
  </div>

  <div>
    goodbye world!
  </div>
</html>

如何根据用户是否点击“hello world！”，“发生了什>

Answer 1

$('div').click(function(){
     console.log($(this).text());
});

但我会绑定一个属性：

<div data-context="a" />

并检查此属性，因为在进一步开发中可能会更改文本。

$(this).data('context');

Answer 2

为div元素设置事件侦听器，并在单击后获取内容。例如：

$(document).ready(function() {
    $(div).click(function() {
        var contents = $(this).text().trim();
        if(contents=="hello world!") {
          // do stuff
        }
        else if(contents=="goodbye world!") {
          // do stuff
        }
        else {
           // do stuff
        }
    });
});

虽然上述方法有效，但它也会触发点击的任何div。对于每个id，更清晰的解决方案是div，其中有一个侦听器会触发其点击。

HTML：

<div id="first">Hello World!</div>
<div id="second">Goodbye World!</div>
<div id="third">What's going on?</div>

jQuery：

$(document).ready(function() {
    $("#first").click(function() {
        console.log($(this).text().trim());
    });
    $("#second").click(function() {
        console.log($(this).text().trim());
    });
    $("#third").click(function() {
        console.log($(this).text().trim());
    });
});

fiddle。

由于div元素通常不用作按钮，因此您应该为每个role="button"元素添加div，以便使用屏幕阅读器的人更容易访问它们。

Answer 3

根据大量短语测试条件并不是一个好主意。

相反，每个div都有一个类，并根据类写出你的条件。

<强> HTML

<div class="one">hello world!</div>
<div class="two">what's going on?</div>
<div class="three">goodbye world!</div>

<强> JS

$('div').click(function() {
   var $this = $(this),
       contents = $this.text();
    if($this.hasClass('one')) {
      // do something   
    } else if ($this.hasClass('two')) {
       // something else   
    }
    ..
    ..
});

要获取元素内的文本，您只需使用text方法

即可

$(element).text();

Answer 4

修改

$(document).on('click', 'div', function (){ var test = $(this).text().trim(); if(test == "hello world!"){ alert("hello"); } else{ alert("Something else"); } //the rest of the condition });

FIDDLE

Answer 5

见这个例子：

$("div").click(function(){
   var text = $(this).text().trim();
    if(text == "what's going on?"){
       alert("Option 1");
    }else if(text == "goodbye world!"){
        alert("option2");
    }
});

此示例的一个重要元素是修剪了检索到的文本，这消除了元素中可能包含的空白。

JS小提琴： http://jsfiddle.net/bqn58/

找到用户点击jquery的按钮中写的内容

5 个答案: