Javascript - 在點擊設置div顯示 - 未定義ClassName

我試圖通過單擊圖像來使用以下功能來更改div是否顯示。Javascript - 在點擊設置div顯示 - 未定義ClassName

function showTxt(elementClass, nr) { 
 
    "use strict"; 
 
    if (document.getElementByClassName(elementClass)[nr].style.display === "none") { 
 
     document.getElementByClassName(elementClass)[nr].style.display = "block"; 
 
    } else { 
 
     document.getElementByClassName(elementClass)[nr].style.display = "none"; 
 
    } 
 
}

.employees{ 
 
    width: 80%; 
 
    margin-left: 10%; 
 
} 
 

 
.employee{ 
 
    width: 20%; 
 
    display: inline-block; 
 
    margin-left: 5%; 
 
    vertical-align: top; 
 
    margin-right: 5%; 
 
} 
 

 
.employee_img img{ 
 
    width: 100%;  
 
} 
 

 
.employee_txt{ 
 
    display: none; 
 
}

<div class="employees"> 
 
      
 
     <div class="employee"> 
 
      <div class="employee_img"> 
 
       <img src="resources/katerina.jpg" alt="katerina"> 
 
      </div> 
 
      <div class="employee_txt" id="katerina"></div> 
 
     </div> 
 
     
 
     <div class="employee"> 
 
      <div class="employee_img"> 
 
       <img src="resources/sindre.jpg" alt="sindre"> 
 
      </div> 
 
      <div class="employee_txt" id="sindre"></div> 
 
     </div> 
 
     
 
     <div class="employee"> 
 
      <div class="employee_img" onclick="showTxt(employee_txt, 2)"> 
 
       <img src="resources/daniel.jpg" alt="daniel"> 
 
      </div> 
 
     
 
      <div class="employee_txt" id="daniel"> 
 
       <p>this is me</p> 
 
      </div> 
 
     </div> 
 
     
 
\t </div>

棧的片段工具顯示消息：「未捕獲的ReferenceError：employee_txt沒有定義」。我不知道爲什麼。

任何幫助表示讚賞。

來源

2017-01-20 SlyTech404

因爲它沒有被定義....你有一個可變參考，而不是一個字符串 – epascarello

幾件事情是錯誤的，這是getElementsByClassName，元素是多元的，而你需要的字符串引號包圍你傳遞你的函數調用。

function showTxt(elementClass, nr) { 
 
    "use strict"; 
 
    if (document.getElementsByClassName(elementClass)[nr].style.display === "none") { 
 
     document.getElementsByClassName(elementClass)[nr].style.display = "block"; 
 
    } else { 
 
     document.getElementsByClassName(elementClass)[nr].style.display = "none"; 
 
    } 
 
}

.employees{ 
 
    width: 80%; 
 
    margin-left: 10%; 
 
} 
 

 
.employee{ 
 
    width: 20%; 
 
    display: inline-block; 
 
    margin-left: 5%; 
 
    vertical-align: top; 
 
    margin-right: 5%; 
 
} 
 

 
.employee_img img{ 
 
    width: 100%;  
 
} 
 

 
.employee_txt{ 
 
    display: none; 
 
}

<div class="employees"> 
 
    
 
\t <div class="employee"> 
 
\t \t <div class="employee_img"> 
 
\t \t <img src="resources/katerina.jpg" alt="katerina"> 
 
\t \t </div> 
 
\t \t <div class="employee_txt" id="katerina"></div> 
 
\t </div> 
 

 
\t <div class="employee"> 
 
\t \t <div class="employee_img"> 
 
\t \t <img src="resources/sindre.jpg" alt="sindre"> 
 
\t \t </div> 
 
\t \t <div class="employee_txt" id="sindre"></div> 
 
\t </div> 
 

 
\t <div class="employee"> 
 
\t \t <div class="employee_img" onclick="showTxt('employee_txt', 2)"> 
 
\t \t <img src="resources/daniel.jpg" alt="daniel"> 
 
\t \t </div> 
 

 
\t \t <div class="employee_txt" id="daniel" style="display:none;"> 
 
\t \t <p>this is me</p> 
 
\t \t </div> 
 
\t </div> 
 

 
</div>

來源

2017-01-20 16:25:58

您的代碼

onclick="showTxt(employee_txt, 2)"

它要找一個變量employee_txt不是一個字符串。

onclick="showTxt('employee_txt', 2)"

來源

2017-01-20 16:24:39 epascarello

你必須把它

<div class="employee_img" onclick="showTxt('employee_tx', 2)"> 
       <img src="resources/daniel.jpg" alt="daniel"> 
</div>

來源

2017-01-20 16:25:05

您需要使用的，而不是調用函數和分配的結果給onClick處理器的showTxt函數引用。

要做到這一點，使用：

onClick="showTxt.bind(showTxt, 'employee_txt', 2)"

這將返回已經綁定了2個參數，以便它可以只被稱爲func()新的功能。

我還建議你在你的showTxt函數中使用一個變量來存儲getElementsByClassName(classname)[index]調用的結果。

來源

2017-01-20 16:29:19

Javascript - 在點擊設置div顯示 - 未定義ClassName

回答

相關問題