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

Question

我的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？ 请帮忙！

Answer 1

我添加了一个名为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/

PURE JS VERSION

    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/

Answer 2

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

您需要使用类.optionsecoptions迭代所有元素并在每个元素上附加click事件侦听器（或者更好地将所有<div>括在包装器中并利用click事件的冒泡）

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

Answer 3

  

我想使用这些DIV作为选项。出于这个原因，DIV   被点击的应该是可选择的（留下其他非   选中 - 只有一个应该是活动的）

您不应该使用div作为选项。这不是语义。无线电（和复选框）是用于此目的的元素。 div用于将您的内容划分为多个部分，这是您应该停止的地方。您对表单元素使用无线电和复选框。还有许多其他问题滥用元素，而这些元素并不适用于：

1. 你最终会得到很多无关的代码，只是为了迫使div做他们不应该做的事情。维护选择状态，自定义演示文稿等。一段时间内的代码变得复杂且难以维护。
2. 您还需要额外的代码，然后将值与表单数据一起发布回服务器端代码。你将进入箍，将div州强制转化为有意义的价值观，形成元素的东西为你提供了开箱即用的价值。 UI不再保持清洁。
3. 想象一下其他开发人员负责维护您的代码。 （S）他将浪费大量的生产时间，试图破译那些神奇的价值来自哪里。然后做出微小的改变将是一种负担。使用表单元素时，所有用户收集的值都在同一位置，并且可以清楚地显示为代码中的表单元素。然后，很容易破译所有这些价值来自的地方。

您的评论：

  

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

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

解决方案：

我认为您希望使用div选项的唯一原因是您可以自定义它。那么，你也可以自定义收音机和复选框。使用表单元素将为您节省大量代码，而且您根本不需要Javascript，因为这些值将成为formData的一部分，并且只需服务器就可以使用。

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

使用无线电：

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

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

Snippet 1 ：

＆＃13;
＆＃13;
function getOptions() {
    var elems = document.getElementById('myform').elements;
    var sel = elems['myOptions'].value;
    alert(sel);
}
＆＃13;
* { 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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

如果您根本需要将其更改为多个选项，只需将radio更改为checkbox而无需对代码进行任何更改即可轻松完成此操作。 p>

使用复选框：

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

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

Snippet 2 ：

＆＃13;
＆＃13;
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));
}
＆＃13;
* { 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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

希望有所帮助。

Answer 4

这是纯粹的JS解决方案  1.使用class optionsecoptions查找所有div  2.添加点击监听器  3.使用活动属性向div添加活动属性  4.从其他div中删除活动属性  5.添加点击监听器以确认链接，打印具有活动属性的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);

Answer 5

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

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

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

Answer 6

尝试以下代码

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

在这种情况下，$（this）将为​​您提供要点击的元素。

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

Answer 7

也许尝试以下小提琴。警报只是为了向您展示代码的工作原理。您可以使用消息span或div并将div的文本设置为所选div的文本......

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

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

Answer 8

请尝试以下操作： Demo

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

CSS：

.active {
    background: red;   

}

Answer 9

我在css中创建了一个'selected'类，并使用'this'运算符来查找活动类。 ＆安培;添加了jquery插件。那个到当前div并从所有其他div中移除

JS Fiddle updated

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

Answer 10

此功能可帮助您快速添加活动系统。

    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。