Question

我希望能够通过jquery检测DIV中的哪个特定项目。我试过给每个标签一个不同的ID和值，但它只返回[object 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>

Answer 1

您的HTML标记无效。您将相同的Id值提供给多个元素，这是无效的！

您应该在内部元素上连接click事件（使用css类选择器）并使用<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>方法获取value属性（或任何需要的属性。

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

这应该有用。

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

处理点击事件的脚本

find()

如果您想要访问点击范围内的单选按钮，可以在$(this)上使用{{1}}方法

Here是一个有效的jsfiddle

Answer 2

首先 - 您对输入结构有一些问题 - 单选按钮需要具有相同的名称。然后，您可以使用名称和值（通过单击单选按钮更改）以警告radiobutton组的值。

＆＃13;

$(document).ready(function(){
   $("[name=color]").click(function() {
    var itemClicked=$(this).val();
            alert(itemClicked);
        });
   })

＆＃13;

#colorButtonGroup label{border-radius: 50px}
.white{background-color: white}
.orange{background-color: orange}
.blue{background-color: #45b0ff}
.red{background-color: #ea2232}
.yellow{background-color: yellow}
.pink{background-color: pink}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colorButtonGroup">
        <label class="color-buttons btn btn-cons white active">
                <input type="radio" autocomplete="off"  id="idColorCodeWhite" name="color" value="White"> White
        </label>
        <label class="color-buttons btn btn-cons orange">
                <input type="radio" name="color"  id="idColorCodeOrange" value="Orange" autocomplete="off"> Orange
        </label>
        <label class="color-buttons btn btn-cons blue">
                <input type="radio" id="idColorCodeBlue" name="color" value="Blue" autocomplete="off"> Blue
        </label>
        <label class="color-buttons btn btn-cons red">
                <input type="radio" id="idColorCodeRed" name="color" value="Red" autocomplete="off"> Red
        </label>
        <label class="color-buttons btnyellow btn-cons yellow">
                <input type="radio"  id="idColorCodeYellow"  name="color"  value="Yellow" autocomplete="off"> Yellow
        </label>
        <label class="color-buttons btn btn-cons pink">
                <input type="radio" id="idColorCodePink" name="color" value="Pink" autocomplete="off"> Pink
        </label>
    </div>

＆＃13;

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

2 个答案: