Question

已更新

我想我可能无意中让这个问题变得混乱。这是一个更新，更新特定的更新代码基于评论和答案我到目前为止。感谢所有花时间发表评论和回答的人。

当我有<div>的点击监听器时，如何获取.button类.button的ID。如果点击.button或其任何子项，则应返回该div类的特定.button的ID。

这是我到目前为止所做的：New JSFiddle

HTML

<div class="row">
  <div id="b1" class="button">
    <h2>Button 1</h2>
  </div>
  <div id="b2" class="button">
    <h2>Button 2</h2>
  </div>
  <div id="b3" class="button">
    <h2>Button 3</h2>
  </div>
</div>

的jQuery

var selected = "";

$('.button').on('click', function(e) {
  selected = e.target.id;

  $('.button').css('backgroundColor', '#becde5');
  $('#' + selected).css('backgroundColor', '#3b71c6');

  $('#selected').html(selected);
});

这几乎是正确但不传播，如果我点击<h2>该功能不起作用。但是，如果我点击.button div本身就可以了。

初步问题

我正在尝试创建一个通用函数，可以识别从其父级单击侦听器中选择的子级。孩子可能有自己的孩子，这些孩子都被认为是同一个元素的一部分，这样如果这些孩子中的任何一个被选中，他们也应该从点击听众那里得到相同的答案。

这是我迄今为止所做工作的一个例子：JSFiddle

包含三个按钮的HTML，这些按钮都有一个子<h2>标记，并将<div class="row">作为其父级共享。

<div class="row">
  <div class="b1 button">
    <h2 class="b1">Button 1</h2>
  </div>
  <div class="b2 button">
    <h2 class="b2">Button 2</h2>
  </div>
  <div class="b3 button">
    <h2 class="b3">Button 3</h2>
  </div>
</div>

jQuery，用于侦听<div class="row">上的点击。它检索被点击元素的第一个类名，并将其存储在变量中。在这种情况下引出的响应是CSS样式background-color的更改，尽管这是任意的，并且会根据函数的使用而改变。

var selected = "";

$('.row').on('click', function(e) {
  selected = e.target.className.split(" ")[0];

  $('.b1, .b2, .b3').css('backgroundColor', '#becde5');
  $("." + selected).css('backgroundColor', '#3b71c6');

  $('#selected').html(selected);
});

我为元素添加了很多类，纯粹是为了在点击上识别它们，这似乎不会很好地扩展，通常是一种糟糕的方法。这个方法也意味着我总是需要放置类名来标识在HTML class属性的开头选择了哪个元素。这可能会使用相同的方法与其他函数发生冲突。

是否有更好的方法来识别从其父级点击监听器中选择了哪个子元素，其中一个孩子可能还有其他孩子需要来自听众的相同响应？

Answer 1

根据编辑过的问题

编辑：

我认为你真正想要的是触发事件的元素的- (void)viewDidLoad { [super viewDidLoad]; //the code below was causing the delay ... this worked find in iOS9 //tried legacy #define style //[self setSelectedIndex:int(SelectedLandingToTab)]; //tried extern style .... both fail //[self setSelectedIndex:SELECTEDLANDINGTAB]; } //... @end 但是通过使用id你有目标元素......这不一定是触发事件的元素。

见this updated Fiddle。

只需使用e.target作为选择器来检索ID ...使用$(this)。

）

回答最初的问题：
为了确定可以选择＆＃34;选择＆＃34;，我使用了一个＆＃34;可点击的＆＃34;类。

为避免使用.attr("id")或id作为标识符来确定已点击的内容， class属性可能很有用。

我使用了data ...但您可以使用您想要的任何内容，例如：data-id或data-selected，并为其指定任何值。

在下面的代码中，除了data-target值之外，我创建了两个完全相同的行。

＆＃13;

data-id

＆＃13;

var selected = "";

$('.clickable').on('click', function(e) {
    e.stopPropagation(); // To prevent bubbling.

    // Reset all bg colors
    $('.button').css('backgroundColor', 'initial');
    $('.row').css('backgroundColor', 'initial');

    // Find exactly what was clicked
    if ($(this).hasClass("row")) {
        var row = $(this).data("id");
        selected = row + " (whole)";
    }

    if ($(this).hasClass("button")) {
        // Find in which row
        var row = $(this).closest(".row").data("id");
        var btn = $(this).data("id");
        selected = btn + " in " + row;
    }

    // Pale all buttons
    $('.button').css('backgroundColor', '#becde5');
    // Change bg color of the selected element
    $(this).css('backgroundColor', '#3b71c6');

    $('#selected').html(selected);
});

＆＃13;

.row {
    display: table;
    width: 100%;
    color: white;
    border-spacing: 20px;
}

.button {
    display: table-cell;
    border-radius: 12px;
    background-color: #6fa1f2;
    text-align: center;
}

#selected {
    font-size: 30px;
    color: green;
}

＆＃13;

Answer 2

无需识别主题，因为它是单击的，即e.target使用jQuery，您无法选择$(e.target)而没有任何问题

然后您需要.closest('.button')来搜索父.button（如果有的话）

$('.row').on('click', function(e) {
  $('.row > .button').css('backgroundColor', '#becde5');
  $(e.target).closest('.button').css('backgroundColor', '#3b71c6');

  console.log($(e.target).html());
});

.button {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


<div class="row">
  <div class="button">
    <h2>Button 1</h2>
  </div>
  <div class="button">
    <h2>Button 2</h2>
  </div>
  <div class="button">
    <h2>Button 3</h2>
  </div>
</div>

Answer 3

如果您避免提供标识符（类，ID等），您需要对标记类型进行一些手动检查，以查看您点击的内容（基本上也是标识符）

这是一个例子，而不是非常有效的内存方法 jsfiddle example

$('.row, .row  *').on('click', function(e) {
  e.stopPropagation()    

  $('.button').removeClass('active')
  $('.button').css('backgroundColor', '#becde5');

  $(this).toggleClass('active')

  $('#selected').html(e.target.tagName + ': ' + e.target.className);
});

如果将单击绑定到div.row并单击按钮内的h2标记，并想要操作h2标记，则可以检查其tagName-但其可扩展性低于OP。

如何在点击元素或其子元素时获取该元素的ID？

3 个答案: