Question

我正在尝试使用以下函数通过单击图像来更改div是否显示。

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

Stack的代码段工具显示消息：“Uncaught ReferenceError：employee_txt未定义”。我不知道为什么。

感谢任何帮助。

Answer 1

有些事情是错误的，它是getElementsByClassName，元素是复数，你需要在你的函数调用中传递的字符串周围引用。

＆＃13;

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";
    }
}

＆＃13;

.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;
}

＆＃13;

<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" style="display:none;">
		  <p>this is me</p>
		</div>
	</div> 

</div>

＆＃13;

Answer 2

您的代码

onclick="showTxt(employee_txt, 2)"

它正在寻找变量employee_txt而不是字符串。

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

Answer 3

你必须把它叫做

WWDS.browser.get('http://login.salesforce.com')
var pkg = JavaImporter(org.openqa.selenium)
var username = WDS.browser.findElement(pkg.By.id('username'))
username.sendKeys(['prakash93@salesforce.com'])
var password = WDS.browser.findElement(pkg.By.id('password'))
password.sendKeys(['*********'])
var Login = WDS.browser.findElement(pkg.By.cssSelector('button.button-Login'))
button.click()

Answer 4

您需要使用showTxt的函数引用，而不是调用函数并将其结果分配给onClick处理程序。

为此，请使用：

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

这将返回一个新函数，该函数已经绑定了2个参数，因此它可以被称为func()。

我还建议您在showTxt函数中使用变量来存储getElementsByClassName(classname)[index]调用的结果。

Javascript - 在点击时设置div显示 - 未定义ClassName

4 个答案: