如何使用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

您可以將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);;
}

這是工作演示

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

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/

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

希望有幫助。

.

Answer 4

這是純 JS 解決方案 1. 找到所有帶有類 optionssecoptions 的 div 2. 向它們添加點擊監聽器 3. 將 active 屬性添加到具有 active 屬性的 div 4. 從其他 div 的刪除 active 屬性 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

也許試試下面的小提琴。 Alert 只是為了向您展示代碼的工作原理。 您可以使用消息范圍或 div 並將 div 的文本設置為所選 div 的文本...

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

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

Answer 8

像這樣嘗試：演示

$(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小提琴更新

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

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

此函數使用 your-class 刪除所有元素中的活動類，並在您單擊的元素上添加活動類。 在 CSS 中創建自定義 .active 以更新 UI。