使用jquery在DIV中查找单击的项

我希望能够检测使用jquery单击DIV中的哪个特定项。我尝试给每个标签一个不同的ID和值，但它只返回[object]。我希望能够获得被单击的标签的特定标签或值。我做错了什么

        $("#colorButtonGroup").click(function (e) {
            var itemClicked=$(e.target).closest('#colorButtonGroup').find('value');
            alert(itemClicked);
        });


    <div id="colorButtonGroup">
        <label class="color-buttons btn btn-cons active" id="idColorCodeWhite" value="White" style="border-radius: 50px; background-color: white;">
                <input type="radio" autocomplete="off" checked> White
        </label>
        <label class="color-buttons btn btn-cons" id="idColorCodeOrange" value="Orange" style="border-radius: 50px; background-color: orange;">
                <input type="radio" autocomplete="off"> Orange
        </label>
        <label class="color-buttons btn btn-cons" id="idColorCodeBlue" value="Blue" style="border-radius: 50px; background-color: #45b0ff">
                <input type="radio" autocomplete="off"> Blue
        </label>
        <label class="color-buttons btn btn-cons" id="idColorCodeRed" value="Red" style="border-radius: 50px; background-color: #ea2232">
                <input type="radio" autocomplete="off"> Red
        </label>
        <label class="color-buttons btn btn-cons" id="idColorCodeYellow" value="Yellow" style="border-radius: 50px; background-color: yellow">
                <input type="radio" autocomplete="off"> Yellow
        </label>
        <label class="color-buttons btn btn-cons" id="idColorCodePink" value="Pink" style="border-radius: 50px; background-color: pink">
                <input type="radio" autocomplete="off"> Pink
        </label>
    </div>

$（“#colorButtonGroup”）。单击（函数（e）{
var itemClicked=$（e.target）。最近（“#colorButtonGroup”）。查找（'value'）；
警报（单击项）；
});
白色
橙色
蓝色
红色
黄色的
粉红色

您的html标记无效。您正在为多个元素提供相同的Id值，这是无效的

您应该连接内部元素上的click事件（使用css类选择器），并使用

attr

方法获取value属性（或任何需要的属性）

另外，我也不确定标签是否是合适的容器元素。跨度可能是更好的容器

这应该行得通

 <div id="colorButtonGroup">
        <span class="color-buttons btn btn-cons active"  
                    value="White" style="border-radius: 50px; background-color: white;">
                <input type="radio" autocomplete="off" checked /> White
        </span>
        <span class="color-buttons btn btn-cons" 
                   value="Orange" style="border-radius: 50px; background-color: orange;">
                <input type="radio" autocomplete="off"> Orange
        </span>

</div>

如果要访问单击范围内的单选按钮，可以使用

$（此）

---

是一个工作的JSFIDLE

首先-输入的结构有一些问题-单选按钮需要具有相同的名称。然后，您可以使用名称和值（随着单选按钮的单击而更改）来提醒radiobutton组的值

$（文档）.ready（函数（）{
$（“[name=color]”。单击（函数（）{
var itemClicked=$（this.val（）；
警报（单击项）；
});
})

#colorButtonGroup标签{边框半径：50px}
.white{背景色：白色}
.orange{背景色：orange}
.blue{背景色：#45b0ff}
.red{背景色：#ea2232}
.yellow{背景色：黄色}
.pink{背景色：pink}

白色
橙色
蓝色
红色
黄色的
粉红色

事实上我更喜欢这个版本。谢谢！不客气-还建议不要使用内联样式，在css中使用，并在每个元素上使用类，以使类样式生效-祝您好运，编码愉快：）嘿-@mattmorrow-我刚刚编辑了我的答案，以显示我对类和CSS样式/类的意思。本质上，该类是在css中定义的，并应用于radi0o按钮标签。如果你想编辑，更容易阅读和修改也就是说，您可以通过更改类等来选择更改颜色。如果可能，最好将样式和结构（以及功能）分开。快乐编码。

$(function(){      
    $(".color-buttons").click(function (e) {
            var itemClicked=$(this);
            alert(itemClicked.attr("value"));          
    });         
})