【问题标题】：How to select only one DIV from multiple divs using javascript如何使用javascript从多个div中只选择一个div
【发布时间】：2020-11-09 15:45:01
【问题描述】：

我的 HTML 中有以下代码，它有多个 DIV，我想使用这些 DIV 作为选项。出于这个原因，被点击的 DIV 应该是可选择的（不选择其他的 - 只有一个应该是活动的），当我点击确认链接时，所选 DIV 中的值应该显示在消息框上。

<div style="margin-top:10px;">
    <div class="optionsecoptions">
        &nbsp;&nbsp;Computers
    </div>
    <div class="optionsecoptions" style="top:151px;">
        &nbsp;&nbsp;Electronics
    </div>
    <div class="optionsecoptions" style="top:212px;">
        &nbsp;&nbsp;Mechanical
    </div>
    <div class="optionsecoptions" style="top:273px;">
        &nbsp;&nbsp;Electrical
    </div>
</div>
<a href="#"> Confirm </a>

这里是演示：

http://jsfiddle.net/sathish_opr/ntxuc69a/

我在 Jquery 中尝试了一些解决方案，但这可以使用简单的 javascript 吗？请帮忙！

【问题讨论】：

您为什么使用div 作为选项？为什么不使用用于此目的的简单单选按钮？
嗨，我想使用 DIV 进行选择。只是因为我在良好的水平上对其进行了自定义，并且我相信这种选择也可以用于 DIV 元素 - 除了单选按钮等其他选项 -复选框等，
你想像链接一样使用它们吗？
不，只有 DIV 部分

标签： javascript html css

【解决方案1】：

您可以将addEventListener 用于仅使用 javascript 的解决方案，以在您的 <div> 中添加/删除特定类。

您需要遍历所有具有.optionsecoptions 类的元素并在每个元素上附加点击事件侦听器，（或者最好将所有<div> 包含在一个包装器中并利用点击事件的冒泡）

var x = document.getElementsByClassName('optionsecoptions')
for (var i = 0; i < x.length; i++) {
    x[i].addEventListener("click", function(){

    var selectedEl = document.querySelector(".selected");
    if(selectedEl){
        selectedEl.classList.remove("selected");
    }
    this.classList.add("selected");

    }, false);;
}

这是工作demo

【讨论】：

非常感谢您的帮助！

【解决方案2】：

我添加了一个名为 selected 的新类名，根据类名，当您点击底部的确认按钮时，您可以得到选中的项目。

    $("#container").delegate("div","click",function(e){
    $("#container .selected").removeClass("selected");
    $(this).addClass("selected");
});

$("#confirm").click(function(){
    var selectedTxt = $("#container .selected").text() || "select one opction";
    alert(selectedTxt);
});

工作网址：http://jsfiddle.net/2yfhh0rs/

纯 JS 版本

    var container = document.getElementById("container"),
    confirmBtn = document.getElementById("confirm");
container.addEventListener("click",function(e){
    var selectedEl = document.querySelector(".selected");
    console.log(selectedEl);
    if(selectedEl){
        selectedEl.classList.remove("selected");
    }
    e.target.classList.add("selected");
});
confirmBtn.addEventListener("click",function(){
    var selectedEl = document.querySelector(".selected");
    alert(selectedEl.innerText);
});

工作演示：http://jsfiddle.net/2yfhh0rs/1/

【讨论】：

感谢 Venkat，这是一个干净的解决方案。有没有办法使用简单的 javascript 来完成同样的任务？...出于某种原因，我不想使用 Jquery
感谢 Venkat 添加 Javascript 版本 :)

【解决方案3】：

我想将这些 DIV 用作选项。为此，DIV 被点击的应该是可选择的（不让其他人已选择 - 只有一个应该处于活动状态）

您不应该使用divs 作为选项。这不是语义。收音机（和复选框）是为此目的而存在的元素。 divs 用于将您的内容划分为多个部分，这就是您应该停止的地方。您对表单元素使用单选和复选框。还有许多其他问题是滥用元素来处理它们不适合的事情：

你最终会得到很多无关代码，只是为了迫使divs 做他们不应该做的事情。维护选择状态、自定义演示等。这段代码在一段时间内变得复杂且难以维护。
您还需要额外的代码，然后将值连同表单数据一起发送回服务器端代码。您将竭尽全力将div 状态强制转换为有意义的值，这是表单元素为您提供开箱即用的东西。 UI 不再干净。
想象一下其他开发人员负责维护您的代码。（S）他将浪费大量的生产时间来试图破译那些神奇的价值来自哪里。然后，即使是很小的改变也将是一种负担。当您使用表单元素时，所有用户收集的值都在同一个位置，并且与代码中的表单元素一样清晰可见。然后就很容易理解所有这些值的来源。

您的评论：

我想使用 DIV 进行选择.. 只是因为我自定义了它在良好的水平上，我相信这个选择对于 DIV 来说是可能的元素以及 - 除了单选按钮等其他选项 - 检查盒子等

仅仅因为你相信某事可以是可能的，并不意味着你应该去做。对的，这是可能的。但是，这不是 HTML 的预期目的。

解决方案：

我认为你想使用divs 作为选项的唯一原因是你可以自定义它。好吧，您也可以自定义收音机和复选框。使用表单元素可以节省大量代码，而且您根本不需要 Javascript，因为这些值将成为 formData 的一部分，并且可以在服务器端轻松使用。

只需使用正确的radio（或checkbox，如果需要多个选项），添加相关标签，然后对其进行样式化。就是这样。

使用收音机：

_{Javascript 仅用于演示客户端显示值}

小提琴示例 1：http://jsfiddle.net/abhitalks/xg3dwme7/1/

片段 1：

function getOptions() {
    var elems = document.getElementById('myform').elements;
    var sel = elems['myOptions'].value;
    alert(sel);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
ul.mySection { margin: 16px; list-style: none; }
ul.mySection li { margin: 0px 0px; display: inline-block; }
ul.mySection input[type=radio] { display: none; }
ul.mySection label {
    display: table-cell; cursor: pointer;
    width: 200px; height: 50px; 
    vertical-align: middle; text-align: center;
    background-color: rgba(0, 0, 255, 0.4);
}
ul.mySection label:hover { 
    background-color: rgba(0, 0, 255, 1); color: #fff; transition: all 0.25s;
}
ul.mySection input[type=radio]:checked ~ label { 
    background-color: rgba(50, 200, 50, 1); 
}
input#btn { margin: 8px 18px; padding: 8px; }

<form id="myform">
    <ul class="mySection">
        <li>
            <input type="radio" id="r1" name="myOptions" value="Computers" checked />  
            <label for="r1">Computers</label>
        </li>
        <li>
            <input type="radio" id="r2" name="myOptions" value="Electronics" />  
            <label for="r2">Electronics</label>
        </li>
        <li>
            <input type="radio" id="r3" name="myOptions" value="Mechanical" />  
            <label for="r3">Mechanical</label>
        </li>
        <li>
            <input type="radio" id="r4" name="myOptions" value="Electrical" />  
            <label for="r4">Electrical</label>
        </li>
    </ul>
    <input id="btn" type="button" value="confirm" onclick="getOptions();" />
</form>

如果您需要将其更改为多项选择，只需将radio 更改为checkbox 即可非常轻松地完成此操作，而无需对代码进行任何更改，这一切都会奏效。

使用复选框：

_{Javascript 仅用于演示客户端显示值}

*小提琴示例 2：http://jsfiddle.net/abhitalks/th3yqkq0/4/ *

片段 2：

function getOptions() {
    var frm = document.getElementById("myform");
    var chk = frm.querySelectorAll('input[type=checkbox]:checked');
    var vals = [];
    for (var i=0; i<chk.length; i++) {
        vals.push(chk[i].value);
    }
    alert(JSON.stringify(vals));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
ul.mySection { margin: 16px; list-style: none; }
ul.mySection li { margin: 0px 0px; display: inline-block; }
ul.mySection input[type=checkbox] { display: none; }
ul.mySection label {
    display: table-cell; cursor: pointer;
    width: 200px; height: 50px; 
    vertical-align: middle; text-align: center;
    background-color: rgba(0, 0, 255, 0.4);
}
ul.mySection label:hover { 
    background-color: rgba(0, 0, 255, 1); color: #fff; transition: all 0.25s;
}
ul.mySection input[type=checkbox]:checked ~ label { 
    background-color: rgba(50, 200, 50, 1); 
}
input#btn { margin: 8px 18px; padding: 8px; }

<form id="myform">
    <ul class="mySection">
        <li>
            <input type="checkbox" id="r1" name="myOptions" value="Computers" />  
            <label for="r1">Computers</label>
        </li>
        <li>
            <input type="checkbox" id="r2" name="myOptions" value="Electronics" />  
            <label for="r2">Electronics</label>
        </li>
        <li>
            <input type="checkbox" id="r3" name="myOptions" value="Mechanical" />  
            <label for="r3">Mechanical</label>
        </li>
        <li>
            <input type="checkbox" id="r4" name="myOptions" value="Electrical" />  
            <label for="r4">Electrical</label>
        </li>
    </ul>
    <input id="btn" type="button" value="confirm" onclick="getOptions();" />
</form>

希望对您有所帮助。

.

【讨论】：

嗨，感谢您的反馈 :)
@SathishPanduga：很高兴你发现它有帮助。另外，请注意，即使隐藏单选框/复选框也不是最佳做法。我只是快速地为你演示了它。在生产质量代码中，它们应该是可见的（如果需要，可以通过任何 UI 自定义）。这也有利于可访问性。

【解决方案4】：

这是纯JS解决方案 1. 查找所有具有类 optionsecoptions 的 div 2.为他们添加点击监听器 3. 用active属性给div添加active属性 4. 移除其他div的active属性 5. 添加点击监听确认链接，打印带有active属性的div内容

演示 https://jsfiddle.net/youssefmohamed/ntxuc69a/21/

HTML

<div style="margin-top:10px;" id="container">
                <div class="optionsecoptions">
                    &nbsp;&nbsp;Computers
                </div>
                <div class="optionsecoptions" style="top:151px;">
                    &nbsp;&nbsp;Electronics
                </div>
                <div class="optionsecoptions" style="top:212px;">
                    &nbsp;&nbsp;Mechanical
                </div>
                <div class="optionsecoptions" style="top:273px;">
                    &nbsp;&nbsp;Electrical
                </div>
            </div>


<a href="#"> Confirm </a>

CSS

#container div[active="active"]
{
    background-color: #226fa3;
    transition: background-color 0.4s ease-in, border-color 0.4s ease-in;
    color:#ffffff;
}
.optionsecoptions
{
    width: 400px;
    height: 40px;
    background: #bbb8b8;
    float: left;
    font-size:20px;
    cursor:pointer;
}
.optionsecoptions:hover,
.optionsecoptions:active {
    background-color: #226fa3;
    transition: background-color 0.4s ease-in, border-color 0.4s ease-in;
    color:#ffffff;
}

JS

    // get all divs with class optionsecoptions
        var options = document.getElementsByClassName("optionsecoptions");
// add click listener to them
        for(var i=0; i<options.length; ++i) {
            options[i].addEventListener("click", function(event){
                if(!this.active) {
                    this.setAttribute("active","active");
                    // remove all active attributes from other divs
                    for(var i=0; i<options.length; ++i) {
                        if(options[i] != this) {
                            options[i].removeAttribute("active");
                        }
                    }
                }
            }, false);
        }
// get confirm link
        var confirm = document.getElementsByTagName("a")[0];
// add click listener to link
        confirm.addEventListener("click", function(event){

            for(var i=0; i<options.length; ++i) {
                if(options[i].hasAttribute("active")) {
                    alert(options[i].textContent);
                    break;
                }
            }
            event.preventDefault();
        }, false);

【讨论】：

【解决方案5】：

给每个 div 一个 ID，并根据你的 ID 工作，我建议在这里使用 jquery。

if($("#element").click()) {
  method body. 
}

如果你想使用纯javascript，请使用document.getElementById("Element");

【讨论】：

嗨 Barr，'document.getElementById("Element")' 可用于访问元素，但在这种情况下，我们如何使用 javascript 持久化 DIV 选择？
因为通过这个，你可以检查元素是否被点击。例如， if(document.getElementById("Element").click()) { 方法体 }

【解决方案6】：

试试下面的代码

$(".optionsecoptions").click(function(event){
    alert($(this).html());
    event.stopImmediatePropagation();
});

在这种情况下，$(this) 将为您提供您正在单击的元素。

请注意它需要包含 jQuery 文件。

【讨论】：

【解决方案7】：

也许试试下面的小提琴。警报只是向您展示代码是如何工作的。您可以使用消息跨度或 div 并将 div 的文本设置为所选 div 的文本...

http://jsfiddle.net/ntxuc69a/1/

$( ".optionsecoptions" ).click(function() {
  alert( $(this).text());
    $(this).css('background-color','green');
});

【讨论】：

【解决方案8】：

试试这样：Demo

$(document).ready(function () {
    $('.optionsecoptions').on('click', function () {
        $('.optionsecoptions').removeClass('active');
        $(this).addClass('active');
    });
});

CSS：

.active {
    background: red;   

}

【讨论】：

【解决方案9】：

我在 css 中创建了一个“selected”类，并使用“this”运算符来查找活动类。并添加了 jquery 插件。并将其移至当前 div 并从所有其他 div 中删除

JS Fiddle updated

$(function () {
$('.optionsecoptions').click(function(){
    $('.optionsecoptions').removeClass('selected');
    $(this).addClass('selected');
});
});

【讨论】：

【解决方案10】：

此功能可帮助您快速添加Active System。

    function activeSystem(itemsClass, activeClass) {
        var x = document.getElementsByClassName(itemsClass);
        for (var i = 0; i < x.length; i++) {
            x[i].addEventListener("click", function(){
                [].forEach.call(x, function(el) {
                    el.classList.remove(activeClass);
                });

                this.classList.add(activeClass);

            }, false);;
        }
    }

要使用它，只需调用

activeSystem('optionsecoptions', 'active');
activeSystem('gender-item', 'active');

此功能删除所有元素中的活动类，并在您单击的元素上添加活动类。在 CSS 中创建自定义 .active 以更新 UI。

【讨论】：