【问题标题】：Which Object onclick?点击哪个对象？
【发布时间】：2014-12-18 02:58:59
【问题描述】：

对于下面的 HTML，在五个同级的子 DIV 中的每一个中使用内联 onclick 将背景颜色设置为红色并清除所有其他 DIV 的最佳集中方式是什么？

要替换的内联方法：

<div id="tab1" onclick="setRed();">tab 1</div>

留下更清晰的标记：

<div>tab 1</div>

这就是整个事情的样子：

<div id="nav">
    <div class="blue"><div>tab 1</div></div>
    <div class="blue"><div>tab 2</div></div>
    <div class="blue"><div>tab 3</div></div>
    <div class="blue"><div>tab 4</div></div>
    <div class="blue"><div>tab 5</div></div>
</div>

这是最终的解决方案，从 user2865156 中选择部分并添加一些 javascript 以清除其余部分：

$("#nav div div").on('click', function () {
    if (this.style.backgroundColor !== "red") {
        this.style.backgroundColor = "red";

        siblingDivs = this.parentNode.parentNode.children;
        for (var i = 0; i < siblingDivs.length; i++) {
            if (this !== siblingDivs[i].children[0]) {
                siblingDivs[i].children[0].style.backgroundColor = "transparent";
            }
        }
    }
});

【问题讨论】：

标签： javascript jquery onclick this

【解决方案1】：

尝试使用类似的东西。您需要将其设置为实际函数而不是返回值的值：

var divTabs = document.getElementById("nav").onclick = function() {
    //do something here
}

【讨论】：

【解决方案2】：

如果我理解了你的问题，你可能需要使用.each()方法来获取被点击元素的index，并为其添加对应的red类，所以

拥有这个CSS

.red { background-color: #ff0000; }

你可以使用这个 jQuery 脚本：

jQuery(document).ready(function ($) {
    $(".blue").each(function (i) {
        $(this).on("click", function () {
            $(".blue").removeClass("red").eq(i).addClass("red")
        })
    })
}); // ready

注意我们正在使用.eq(i) 方法在从任何其他的。

见JSFIDDLE

【讨论】：

优秀。我从来没有在我的场景中完成我的想法，但是，是的，这个想法是为了表明选择的兄弟姐妹。您的解决方案超出了我的新手头，所以现在我正在研究 removeClass("red").eq(i) 如何从其他兄弟姐妹中删除红色类，而 "this" 兄弟姐妹通过 .addClass("红色的”）。谢谢！
我评论说“..removeClass("red").eq(i) 正在删除红色..”我弄错了吗？实际上是 eq(i).addClass("red") 根据索引 i 添加红色类吗？
这个$(".blue").removeClass("red").eq(i).addClass("red")从所有带有class blue的选择器中删除了class red，但是添加了class red 仅匹配i 的值的元素（您从each() 方法中单击的元素中获得i 的值）

【解决方案3】：

我想这就是你需要的。

DEMO

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  padding: 24px;
}
.blue {
  cursor: default;
  border: 1px dashed #454545;
  padding: 8px 16px;
  display: inline-block;
}
.blue.active {
  background: red;
}

jquery js

$(function() {
    $('#nav').on('click', '.blue', function(e) {
        var $this = $(this),
            innerHtml = $this.html(), //inner html
            text = $this.text();

        // there are obv easier ways to do the below; just a proof of concept.
        !!~text.indexOf("tab") && $('.active').removeClass('active') && 
            $this.addClass('active');
    })
})

【讨论】：

【解决方案4】：

使用 jQuery，定位类：

$("#nav .blue").click(function() {
    //$(this) refers to the clicked element as a jQuery object
    var innerHtml = $(this).html(); //inner html
    var text = $(this).text(); //text inside the inner html

    //Logic
});

【讨论】：

$("#nav .blue") 是父级，对吗？每个 $("#nav .blue") 是否还有一个 .children[0] 目标？（仍在学习这些东西——如果我遗漏了什么，请见谅。）
#nav 是父级，.blue 是 #nav 的子级 - 不知道您在寻找什么 children[0] @Guessed
每个 .blue DIV 也有它自己的嵌套子 DIV（我知道这有点过头了，但出于未提及的其他格式原因需要，以简化讨论）。感谢您的帮助。

【解决方案5】：

这是你想要做的吗？

http://jsfiddle.net/Lwex5wr4/

$(".blue").on('click', function() {
  if (this.style.backgroundColor === "red") {
    this.style.backgroundColor = "transparent"; 
  } else {
    this.style.backgroundColor = "red"; 
  }
});

【讨论】：

【解决方案6】：

尝试这样做：

$("#nav .blue").click(function() {
   $(this).css('background-color', 'red');
});

【讨论】：