如何使用jQuery获取被点击元素的html内容

I am trying to get the inner html content of a particularly clicked div, I have a number of div elements.

我试图获得一个特别点击的div的内部html内容，我有一些div元素。

Look at the code I use below.

看看我在下面使用的代码。

$(function() {

    $( "#try" ).click(function() {
        var clickedValue = $(this).find('div').text();
        alert(clickedValue);
    });

});

<div id="try">
    <div class="cchoice" style="background-color: blue;">B</div> 
    <div class="cchoice" style="background-color: red;">R</div> 
    <div class="cchoice" style="background-color: yellow;">Y</div> 
    <div class="cchoice" style="background-color: black;">B</div> 
    <div class="cchoice" style="background-color: gray;">G</div> 
    <div class="cchoice" style="background-color: white;">W</div> 
</div>

I want to do it in a way such that B appears when the div with background color of blue is clicked on but then it seems something is wrong with the way I am doing it. For some reasons, I cannot give id attribute to those set of div and they must have the same class.

我想以这样的方式做到这样，当点击背景颜色为蓝色的div时，B会出现，但是看起来我的方式出现了问题。由于某些原因，我不能将id属性赋予那些div组，并且它们必须具有相同的类。

The problem with the code above is that when I click on any of the 6 div elements, the clickedvalue will be BRYBGW.

上面代码的问题是当我点击6个div元素中的任何一个时，clickedvalue将是BRYBGW。

1 个解决方案

#1

$(this).find('div') will return all the div elements within the #try element, instead you want to target only the clicked div

$（this）.find（'div'）将返回#try元素中的所有div元素，而不是只想定位单击的div

You can use event.target

您可以使用event.target

$(function() {
  $("#try").click(function(e) {
    var clickedValue = $(e.target).text();
    alert(clickedValue);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="try">
  <div class="cchoice" style="background-color: blue;">B</div>
  <div class="cchoice" style="background-color: red;">R</div>
  <div class="cchoice" style="background-color: yellow;">Y</div>
  <div class="cchoice" style="background-color: black;">B</div>
  <div class="cchoice" style="background-color: gray;">G</div>
  <div class="cchoice" style="background-color: white;">W</div>
</div>

But I would recommend targeting the actual child element using the click handler.... either by directly binding the handler to them or by using event delegation

但我建议使用click处理程序来定位实际的子元素....通过直接将处理程序绑定到它们或使用事件委托

$(function() {
  //or $("#try > div").click(function(e) {
  $("#try").on('click', 'div', function(e) {
    var clickedValue = $(this).html();
    alert(clickedValue);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="try">
  <div class="cchoice" style="background-color: blue;">B</div>
  <div class="cchoice" style="background-color: red;">R</div>
  <div class="cchoice" style="background-color: yellow;">Y</div>
  <div class="cchoice" style="background-color: black;">B</div>
  <div class="cchoice" style="background-color: gray;">G</div>
  <div class="cchoice" style="background-color: white;">W</div>
</div>

#1