獲取單擊元素父節點的數組編號

-1

我需要能夠單擊該按鈕並返回其父數組編號，以便我可以將樣式應用於具有相同類名的多個div中的一個，我如果可能的話，想在香草javascript中做到這一點。獲取單擊元素父節點的數組編號

<div class="contentBox"> 
      <button onclick="expand()" class="contentBoxButton"> + </button> 
      <title>Lorem Ipsum Here</title> 
      <p> 
       Lorem Ipsum HereLorem Ipsum HereLorem Ipsum HereLorem Ipsum HereLorem Ipsum 
      </p> 
     </div> 
     <script> 
     function expand(){ 
      var button = document.getElementsByClassName('contentBoxButton'); 
      var parent = button.parentNode; 
      parent.style.height = '200px'; 

     } 
     </script>

來源

2014-10-01 Plentybinary

如果你只是想要獲得對父元素的引用，可以使用'

@felix從我理解類的Kling被認爲是JavaScript中的數組，因此如果我只是在應用樣式時得到parentNode，它將適用於所有具有該類名稱的div，而且我只是想將樣式應用於按下的按鈕的父級，並且只將該樣式應用於一個div。 – Plentybinary 2014-10-01 02:04:45

u標記的數組和提到的數組，但在您的代碼中不存在它。你想在香草js中做到這一點，但在這裏沒有JavaScript。你在js上試過了什麼？ – 2014-10-01 02:05:30

信貸菲利克斯克林的評論.parentNode

你沒有得到的單個元素的原因是因爲你開始與它的類訪問點擊按鈕..
var button = document.getElementsByClassName('contentBoxButton');
..這確實會給你一個節點列表與該類的所有元素。
並因此在該行調用parentNode後要麼不起作用，或結果是所有家長的另一個列表..

這是你需要做它的工作是什麼：

小提琴：http://jsfiddle.net/13pkrabq/3/

HTML

<div class="contentBox"> 
    <button onclick="expand(this)"> + </button> 
    <p> 
     Text Text Text 
    </p> 
</div>

function expand(btn) { 
    btn.parentNode.style.height = "200px"; 
}

CSS

.contentBox { 
    background-color:#777777; 
}

（我已經添加了CSS，使contextBox可見）

來源

2014-10-01 02:41:02 myfunkyside

@Plentybinary - 剛纔看到你的問題的最後一條評論。直接引用「parentNode」而不先將它存儲到變量中確實更好。所以在我的回答中，像這樣：'btn.parentNode.style.height =「200px」;'。（已經更新了我的答案） – myfunkyside 2014-10-01 02:50:26

如果這是你想要到div擴大，考慮放在聽衆所以你不必去看。使用這個傳遞給div的引用，然後使用按鈕值打開或關閉div。

切換「+」之間的鍵的值「 - 」在同一時間和使用類應用CSS：

<div onclick="expand(this)"> 
    <input type="button" value="+" class="expandContentButton"> 
    <span class="title">Foo bar</span> 
    <p class="contentPara">here is the content</p> 
</div> 

<script> 
    function expand(el) { 
    var cb = el.querySelectorAll('.expandContentButton')[0]; 
    if (cb == event.target || cb == event.srcElement) { 
     el.className = cb.value == '+' ? 'open' : 'closed'; 
     cb.value = cb.value == '+' ? '-' : '+'; 
    } 
    } 
</script>

和一些CSS：

<style type="text/css"> 
    .title { 
    font-weight: bold; 
    font-size: 150%; 
    } 
    .open {} 

    .closed { 
    height: 30px; 
    overflow: hidden; 
    } 

    .expandContentButton { 
    text-align: middle; 
    width: 3em; 
    } 
</style>

來源

2014-10-01 04:13:44 RobG

獲取單擊元素父節點的數組編號

回答

相關問題