如何從其隱藏的輸入字段獲取其樣式爲塊和值的div

-1

例如，我有5個div，每個div包含一個隱藏的輸入字段。在啓動時，所有的div都被css隱藏。如何從其隱藏的輸入字段獲取其樣式爲塊和值的div

CSS -

.divs_nav{ 
    display:none 
}

的div -

<div id="1" class="divs_nav"> Div - 1 
    <input type="hidden" id="id_qno-1" class="class_qno" value="Question-101" /> 
</div> 
<div id="2" class="divs_nav"> Div - 2 
    <input type="hidden" id="id_qno-2" class="class_qno" value="Question-102" /> 
</div> 
<div id="3" class="divs_nav"> Div - 3 
    <input type="hidden" id="id_qno-3" class="class_qno" value="Question-103" /> 
</div> 
<div id="4" class="divs_nav"> Div - 4 
    <input type="hidden" id="id_qno-4" class="class_qno" value="Question-104" /> 
</div> 
<div id="5" class="divs_nav"> Div - 5 
    <input type="hidden" id="id_qno-5" class="class_qno" value="Question-105" /> 
</div>

在實際代碼，這些div的數量可以達到高達500個或更多和它們的外觀是由上一頁，下一頁導航按鈕定義。但是爲了在這裏演示，我正在通過5個按鈕和jquery來做到這一點。

按鈕 -

<input type="button" id="btn-1" value="1" class="divButton" /> 
<input type="button" id="btn-1" value="2" class="divButton" /> 
<input type="button" id="btn-1" value="3" class="divButton" /> 
<input type="button" id="btn-1" value="4" class="divButton" /> 
<input type="button" id="btn-1" value="5" class="divButton"/>

jQuery的 -

$('.divButton').click(function() { 
    var blockId = this.value; 
    document.getElementById(1).style.display = "none"; 
    document.getElementById(2).style.display = "none"; 
    document.getElementById(3).style.display = "none"; 
    document.getElementById(4).style.display = "none"; 
    document.getElementById(5).style.display = "none"; 
    document.getElementById(blockId).style.display = "block"; 
    });

現在到了真正的問題 - 我有一個按鈕以外上面提到的div，這始終是可見的。 我想要的是，從當前可見div（點擊此按鈕）隱藏輸入字段的值。

<input type="button" id="activeQno" value="Get Active Q. No." class="activeQno"/>

我完全陷在這裏。什麼應該是jQuery獲得所需的信息？

Link of JsFiddle of this e.g.

感謝。問候，

來源

2014-06-08 Dr. Atul Tiwari

我將通過指定一個類來它

DEMO http://jsfiddle.net/V7CFU/14/

$('.divButton').click(function() { 
    var blockId = this.value; 
    $('.currentQ').removeClass('currentQ'); 
    document.getElementById(1).style.display = "none"; 
    document.getElementById(2).style.display = "none"; 
    document.getElementById(3).style.display = "none"; 
    document.getElementById(4).style.display = "none"; 
    document.getElementById(5).style.display = "none"; 
    document.getElementById(blockId).style.display = "block"; 
    $('#' + blockId).addClass('currentQ'); 
}); 
$('.activeQno').click(function() { 
    var value = $('.currentQ').find('input').val(); 
    alert(value); 
});

來源

2014-06-08 18:08:30 Vector

感謝您的課堂建議。它正在工作。但是，就像我對@Nano的回覆所評論的那樣，實際上我在上面提到的div（其類是'divs_nav'）中有多個輸入，子div，表格等。然後如何從隱藏的輸入中得到值，該輸入的類是'class_qno'（當然，也是當前可見的div）。我的意思是在'find（'input'）'使用別的東西，這樣它就不會與其他輸入衝突。 –

你可以使用'find（'。class_qno'）'。它只會查看它的子容器，而不是兄弟。 – Vector

非常感謝。儘管所有3個答案都是正確的，但是你解決了所有問題，所以我選擇它作爲最佳答案。 –

你需要選擇所有目前與jQuery可見的股利。然後在此可見DIV選擇輸入，然後返回他的價值：

$('.activeQno').click(function() { 
    alert($('.divs_nav:visible > input').val()); 
});

Here the updated fiddle

來源

2014-06-08 18:01:32 Nano

感謝做到這一點。它正在工作。但是，我有一個疑問，你使用了'.divs_nav：visible> input'，這對這個演示來說沒問題，但實際上我在上面提到的div中有多個輸入，子div，表格等等（它們的類是'divs_nav' ）然後如何從隱藏的輸入中獲得值，該輸入的類是class_qno（當然，也是當前可見的div）。謝謝。 –

試試這個：

$('.activeQno').click(function() { 
    console.log($(".divs_nav:visible").find("input").val()); 
});

它發現有類.divs_nav那就是「元素可見「，使用find（）查看它並獲取隱藏字段的值。

這裏是一個fidde：http://jsfiddle.net/V7CFU/13/

來源

2014-06-08 18:07:04 Zevan

謝謝。它正在工作。但是，就像我對@Nano的回覆所評論的那樣，實際上我在上面提到的div（其類是'divs_nav'）中有多個輸入，子div，表格等。然後如何從隱藏的輸入中得到值，該輸入的類是'class_qno'（當然，也是當前可見的div）。我想在'find（'input'）'中使用特定的東西，以便它只讀取'class_qno'的輸入，並且不會與其他輸入衝突。 –

如何從其隱藏的輸入字段獲取其樣式爲塊和值的div

回答

相關問題