如何使用javascript从多个DIV中仅选择一个DIV

我有下面的代码在我的HTML有多个DIV的，我想使用这些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>

计算机
数码产品
机械的
与电有关的

以下是演示：

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

---

请帮忙

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

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

如果要使用纯javascript，请使用

document.getElementById（“元素”）
请尝试下面的代码

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

在本例中，$（this）将提供您正在单击的元素

请不要担心它需要包含jQuery文件。
也许可以尝试以下方法。警报只是向您展示代码是如何工作的。您可以使用消息范围或div，并将div的文本设置为所选div的文本


试着这样做：

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

CSS:

我添加了名为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);
});

工作URL:

纯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);
});

工作演示：
我在css中创建了一个类“selected”，并使用“this”操作符查找活动类添加了jquery插件。并将其添加到当前div，并从所有其他div中删除


您可以使用
addEventListener
作为纯javascript解决方案，从
中添加/删除特定类

您需要使用类
.options seoptions
遍历所有元素，并在每个元素上附加click事件侦听器（或者最好将所有
封装在包装器中，并利用click事件的冒泡）

var x=document.getElementsByClassName（'optionsecoptions'））
对于（变量i=0；i

这是正在运行的
这是纯JS解决方案
1.查找具有类选项的所有div seoptions
2.向它们添加单击侦听器
3.将活动属性添加到具有活动属性的div
4.从其他div中删除活动属性
5.添加单击侦听器确认链接，打印具有活动属性的div内容

演示

HTML

JS

//使用类选项secoptions获取所有div
var options=document.getElementsByClassName（“optionsecoptions”）；
//向它们添加单击侦听器
对于（var i=0；i
我想使用这些DIV作为选项。因此，DIV
应选择正在单击的选项（其他选项不可用）
已选择-只有一个应处于活动状态）

您不应该使用
div
s作为选项。这不是语义。收音机（和复选框）是为此目的而存在的元素。
div
s用于将内容划分为多个部分，这是您应该停止的地方。表单元素使用收音机和复选框。滥用元素的其他问题还有很多：

你最终得到了很多无关的代码，只是为了迫使div做他们不应该做的事情。维护选择状态、自定义表示等。这些代码在一段时间内变得复杂且难以维护
您还需要额外的代码，然后将值与表单数据一起发布回服务器端代码。您将陷入困境，将
div
状态强制为有意义的值，这是表单元素提供给您的现成内容。UI不再保持干净
想象一下，其他开发人员负责维护您的代码他将浪费大量的生产时间，只是试图破译这些神奇的值来自何处。然后，即使是很小的更改也将是一个负担。当您使用表单元素时，所有用户收集的值都位于同一位置，并且与代码中的表单元素一样清晰可见。然后，破译这些值来自何处变得非常容易g来自
您的评论：

我想使用DIV进行选择。因为我自定义了它
在良好的水平，我相信这个选择可以为DIV
元素-除了单选按钮等其他选项-选中
盒子等

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


解决方案：
我假设您希望使用
div
s作为选项的唯一原因是您可以自定义它。您也可以自定义收音机和复选框。使用表单元素将节省大量代码，而且您根本不需要Javascript，因为这些值将是
formData
的一部分，并且可用服务器端的零努力

只需使用适当的
收音机
（或
复选框
，如果需要多个选项），添加相关标签，然后对其进行样式化。仅此而已

使用无线电：
Javascript仅用于在客户端为演示显示值

小提琴1示例：

片段1：


函数getOptions（）{
var elems=document.getElementById（'myform'）.elements；
var sel=元素['myOptions'].值；
警报（sel）；
}
*{框大小：边框框；边距：0；填充：0；}
ul.mySection{margin:16px；列表样式：none；}
ul.mySection li{margin:0px 0px；display:inline block；}
ul.mySection输入[type=radio]{显示：n
    $("#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);
});

    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);
});

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

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);;
}

<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>

#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;
}

    // 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);

    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');