我應該如何修改這段代碼，使它適用於嚴重的id？

-1

<script> 
     var toggleVisibility = function(element) { 
     if(element.style.display=='block'){element.style.display='none';} 
     else {element.style.display='block';} 
     }; 
    </script>

我從其他網站和我的div這個代碼，它應該顯示的變動：無顯示：/我應該如何修改這段代碼，使它適用於嚴重的id？

我得到這個：塊被點擊的東西的時候，用severel DIV ID的從CSS不工作在我的DIV應該被點擊，使他人的div可見：

<div id="profile_button_box" onclick="toggleVisibility(document.getElementById('testt'))">

我讀這隻能有一個ID，但我應該怎麼修改代碼以能夠處理severel的div點擊？

來源

2016-10-03 Johannes

改爲使用類 –

你知道如何修改類的代碼嗎？：O @EdHeal – Johannes

我會改變你的JavaScript一點，使其更適應於多用途，也因爲很多人都說它是送花兒給人最好使用類和ID的意思是唯一

toggleVisibility = function(a) { 
 
    var selector = document.querySelectorAll(a); 
 
    for (let i = 0; i < selector.length; i++) { 
 
    if (selector[i].style.display == 'block') { 
 
     selector[i].style.display = 'none'; 
 
    } else { 
 
     selector[i].style.display = 'block'; 
 
    } 
 
    } 
 
};

.example { 
 
    display: flex; 
 
} 
 
#testt { 
 
    background: tomato; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10px; 
 
} 
 
.testt { 
 
    background: darkorange; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10px; 
 
} 
 
pre { 
 
    background: green; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10px; 
 
}

<div class="example"> 
 
    <div id="testt"></div> 
 
    <div id="testt"></div> 
 
    <div id="testt"></div> 
 
    <div id="testt"></div> 
 
    <div id="testt"></div> 
 
    <div id="testt"></div> 
 
</div> 
 

 
<div class="example"> 
 
    <div class="testt"></div> 
 
    <div class="testt"></div> 
 
    <div class="testt"></div> 
 
    <div class="testt"></div> 
 
    <div class="testt"></div> 
 
    <div class="testt"></div> 
 
</div> 
 

 
<div class="example"> 
 
    <pre></pre> 
 
    <pre></pre> 
 
    <pre></pre> 
 
    <pre></pre> 
 
    <pre></pre> 
 
    <pre></pre> 
 
</div> 
 

 
<div id="profile_button_box" onclick="toggleVisibility('#testt')">test IDs</div> 
 
<div id="profile_button_box" onclick="toggleVisibility('.testt')">test classes</div> 
 
<div id="profile_button_box" onclick="toggleVisibility('pre')">test tags</div>

你會注意到ID的ID爲#，我以.開始的類以及我剛剛寫入標籤名稱的標籤（這與CSS相同）。

希望這會有所幫助。

編輯：

當然，一個更好的方法來做到這一點（更少的代碼），將觸發一個隱藏的類。像這樣。

toggleVisibility = function(a) { 
 
    var selector = document.querySelectorAll(a); 
 
    for (let i = 0; i < selector.length; i++) { 
 
    selector[i].classList.toggle("hidden"); 
 
    } 
 
};

.example { 
 
    display: flex; 
 
} 
 
.hidden { 
 
    display: none; 
 
} 
 
#testt { 
 
    background: tomato; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10px; 
 
}

<div class="example"> 
 
    <div id="testt"></div> 
 
    <div id="testt"></div> 
 
    <div id="testt"></div> 
 
    <div id="testt"></div> 
 
    <div id="testt"></div> 
 
    <div id="testt"></div> 
 
</div> 
 
<div id="profile_button_box" onclick="toggleVisibility('#testt')">Button</div>

您可以使用它與上面相同的代碼，但它使用少了很多JS。

來源

2016-10-03 11:53:36

謝謝:)這工作不知道什麼所有div的東西是你張貼，但我包括腳本在我的腦海中，並使用onclick attribut在我的部分:) @ andrew-bone – Johannes

如果您需要切換多個div，則需要將它們全部歸類並使用document.querySelectorAll('.myClass')。請記住，這將返回一個NodeList，您需要迭代以將樣式應用於每個div。

來源

2016-10-03 11:23:29

名稱的類，並嘗試這樣的..

<div id="profile_button_box" class="profileButton">

在的JavaScript

window.onload = function() { 
    var buttons = document.getElementsByClassName('profileButton'); 
    for(var i = 0; i < buttons.length; i++) { 
     var button = buttons[i]; 
     button.onclick = function(element) { 
      if(element.style.display=='block'){ 
        element.style.display='none'; 
      } else { 
        element.style.display='block'; 
      } 
     } 
    } 
}

OR在jQuery的

$(document).on('click', '.profileButton', function(element){ 
      if(element.style.display=='block'){ 
        element.style.display='none'; 
      } else { 
        element.style.display='block'; 
      } 
});

爲撥動操作可以簡單的寫和使用類如..

<style> 
    .hide { display: none; } 
</style> 
<script> 
    $(document).on('click', '.profileButton', function(element){ 
      // here we used classToggle property to hide/display the element 
      $(element).toggleClass('hide'); 
    }); 
</script>

來源

2016-10-03 11:26:27 Sarath

好吧，這看起來不錯，但我如何激活這個$？我想這個功能是真實的，當我點擊一個div :) – Johannes

你有附加jQuery庫在你的腳本.. – Sarath

jQuery的jQuery清酒是一個否，在我看來，如果它尚未被用於項目沒有必要加載整個庫只是這 –

-1

Orginal post

使用類當你要始終如一的風格多個元素 整個網頁/網站。當你擁有或者將來可能擁有多於一個共享相同樣式的元素時，類很有用。一個例子可以是用於相關鏈接的「註釋」或特定列表樣式的分區。

此外，一個給定的元素可以有多個關聯的類，而一個元素只能有一個id。例如，你可以給給一個div兩個類，它們的樣式都會生效。

此外，請注意，除了視覺類別之外，類通常用於定義行爲樣式。例如，jQuery的形式驗證器插件重使用類定義元素（需要或不例如，或限定輸入格式的類型）類名

實施例的驗證行爲有：標籤，評論，工具欄 - 按鈕，警告消息或電子郵件。

當你將採取風格頁面上的單個元素使用ID。請記住，ID必須是唯一的。在你的情況下，這可能是正確的選項，因爲那大概只會是頁面上的一個「主」格。

id的例子是：main-content，header，footer或left-sidebar。 A 記住這一點的好方法是一個類是一種類型的項目，ID是頁面上項目的唯一名稱。

來源

2016-10-03 11:27:00

我應該如何修改這段代碼，使它適用於嚴重的id？

回答

相關問題