文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >OnClick第一次不能工作

问OnClick第一次不能工作
EN

Stack Overflow用户
提问于 2016-12-06 02:16:23
回答 3查看 758关注 0票数 1

我尝试过许多不同的方法来解决这个问题，但不幸的是，我一直未能找到解决办法。(是的，我甚至试图寻找一种解决方案，但没有结果。)

触发器并不是在第一次启动时就开始工作的，但是在第一次执行之后，它就在那里工作了。我已经尝试过将targetToggle设置为0，但它仍然没有工作。

在这方面的任何帮助都将不胜感激！

​

代码语言：javascript
复制
$(document).ready(function() {
  $('.toggleTarget').hide();

  $(".products-item").click(function() {
    var a = $(this).data('number');
    var toggleTargetId = $(this).attr('data-target');
    var toggleTarget = $(document.getElementById(toggleTargetId));

    if (a === "0") {
      toggleTarget.show("slow", "swing");
      $(this).data('number', '1');
    } else {
      toggleTarget.hide("slow", "swing");
      $(this).data('number', '0');
    }
  });
});
代码语言：javascript
复制
.products-item {
  height: auto;
  width: 350px;
  display: inline-block;
  margin: 30px;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  border: solid 2px #f5f5f5;
  border-radius: 10px;
  background-color: #f5f5f5;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: top;
  transition: all 0.25s ease-in-out;
}

.products-item-label {
  width: 100px;
  height: auto;
  font-size: 12px;
  font-family: Comfortaa;
  display: block;
  position: relative;
  padding: 10px;
  left: -22px;
  color: #fff;
  background-color: #015c94;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.products-item-img {
  height: auto;
  width: auto;
  display: inline-block;
  border-radius: 190px;
  transition: all 0.25s ease-in-out;
  z-index: 10;
}

.products-item-text {
  width: auto;
  height: auto;
  bottom: 0px;
  left: 0px;
  margin: 10px;
  padding: 15px;
  display: inline-block;
  font-family: Comfortaa;
  font-size: 14px;
  text-align: center;
  border-radius: 5px;
  color: #333;
  background-color: transparent;
  transition: all 0.25s ease-in-out;
}

.products-item:hover {
  border: solid 2px #bae9ff;
  background-color: #bae9ff;
}

.products-item:hover .products-item-text {
  color: #015c94;
  border-radius: 5px;
}

.products-item:hover .products-item-details {
  color: #015c94;
  transition: color 0.25s ease-in-out;
}

.products-item-details {
  height: auto;
  width: 100%;
  padding-top: 0px;
  padding-bottom: 25px;
  font-size: 14px;
  text-align: center;
}

.products-item-details p {
  width: 350px;
  word-break: break-word;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.products-item-details ul {
  width: 350px;
  margin: 0;
  display: inline-block;
}

.products-item-details li {
  width: 350px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  overflow: hidden;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.products-item-details-table {
  background-color: transparent;
  width: 100%;
  font-family: Comfortaa;
  font-size: 14px;
  padding-top: 20px;
  padding-bottom: 20px;
  table-layout: fixed;
  white-space: nowrap;
  /*border-collapse: collapse; REMOVE BORDER GAPPING */
}

.products-item-details-table tr {
  width: 600px;
}

.products-item-details-table th {
  background-color: #ccc;
  color: #fff;
  font-size: 15px;
  font-weight: normal;
  width: auto;
  border: none;
  text-align: center;
  transition: all 0.25s ease-in-out;
}

.products-item-details-table td {
  background-color: #fff;
  width: 200px;
  text-align: left;
  transition: all 0.25s ease-in-out;
}

.products-item:hover .products-item-details-table th {
  background-color: #015c94;
  color: #fff;
  font-size: 15px;
  font-weight: normal;
  width: auto;
  border: none;
  text-align: center;
}

.products-item:hover .products-item-details-table td {
  background-color: #fff;
  color: #015c94;
  width: 200px;
  text-align: left;
}

.products-item-link {
  width: 100%;
  height: 20px;
  font-size: 16px;
  color: #ccc;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}

.products-item-link:hover {
  color: #666;
}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="info-9-btn" class="products-item" data-target="info-9" data-number="0">

  <div class="products-item-label">NEW</div>

  <div class="products-item-img buoy-9"></div>
  <br />

  <div class="products-item-text">Round Buoy</div>

  <div id="info-9" class="products-item-details toggleTarget">

    <ul style="list-style:none; padding:0; height:auto;">

      <li>500mm x 500mm</li>
      <li>Foam Filled</li>
      <li>Can be engineered into a floating barrier to designate work zones, cordon off weir walls and other dangerous water areas.</li>
      <li>Can be fitted with a mooring tube and used as a mooring buoy.</li>
      <li>Can be used for any water application, where needed.</li>

    </ul>

    <p>Fully Owned and Made in Australia.</p>
    <p>Roto Moulded in our fully automatic, gas compliant, Australian Standard Oven.</p>

  </div>

  <div class="toggleButton"></div>

</div>

​

javascript
jquery
html
css
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-12-06 02:23:34

与(a=="0")一起使用而不是(a === 0)

Difference between == and === in JavaScript

​

代码语言：javascript
复制
$(document).ready(function(){
	
	$('.toggleTarget').hide();
	
	$(".products-item")
	.click(function() {
		
		var a = $(this).data('number');
     
		var toggleTargetId = $(this).attr('data-target');
        var toggleTarget = $(document.getElementById(toggleTargetId));
		
		if (a=="0") {
			toggleTarget.show("slow", "swing");
			$(this).data('number','1');
		} else {
			toggleTarget.hide("slow", "swing");
			$(this).data('number','0');
		}
		
	});
	
});
代码语言：javascript
复制
.products-item {
	height: auto;
	width: 350px;
	
	display: inline-block;
	
	margin: 30px;
	
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	
	border: solid 2px #f5f5f5;
	border-radius: 10px;
	
	background-color: #f5f5f5;
	
	cursor: pointer;
	
	white-space: nowrap;
	
	vertical-align: top;
	
	transition: all 0.25s ease-in-out;
}
.products-item-label {
	width: 100px;
	height: auto;
	
	font-size: 12px;
	font-family: Comfortaa;
	
	display: block;
	
	position: relative;
	
	padding: 10px;
	
	left: -22px;
	
	color: #fff;
	background-color: #015c94;
	
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
.products-item-img {
	height: auto;
	width: auto;
	
	display: inline-block;
	
	border-radius: 190px;
	
	transition: all 0.25s ease-in-out;
	
	z-index: 10;
}
.products-item-text {
	width: auto;
	height: auto;
	
	bottom: 0px;
	left: 0px;
	
	margin: 10px;
	
	padding: 15px;
	
	display: inline-block;
	
	font-family: Comfortaa;
	font-size: 14px;
	
	text-align: center;
	
	border-radius: 5px;
	
	color: #333;
	background-color: transparent;
	
	transition: all 0.25s ease-in-out;
}
.products-item:hover {
	border: solid 2px #bae9ff;
	
	background-color: #bae9ff;
}
.products-item:hover .products-item-text {
	color: #015c94;
	
	border-radius: 5px;
}
.products-item:hover .products-item-details {
	color: #015c94;
	
	transition: color 0.25s ease-in-out;
}
.products-item-details {
	height: auto;
	width: 100%;
	
	padding-top: 0px;
	padding-bottom: 25px;
	
	font-size: 14px;
	
	text-align: center;
}
.products-item-details p {
	width: 350px;
	
	word-break: break-word;
	word-break: break-all;
	word-wrap: break-word;
	
	white-space: pre-wrap;
}
.products-item-details ul {
	width: 350px;
	
	margin: 0;
	
	display: inline-block;
}
.products-item-details li {
	width: 350px;
	
	padding-top: 5px;
	padding-bottom: 5px;
	
	text-align: center;
	
	overflow: hidden;
	
	word-wrap: break-word;
	
	white-space: pre-wrap;
}
.products-item-details-table {
	background-color: transparent;
	
	width: 100%;
	
	font-family: Comfortaa;
	font-size: 14px;
	
	padding-top: 20px;
	padding-bottom: 20px;
	
	table-layout: fixed;
	
	white-space: nowrap;
	
	/*border-collapse: collapse; REMOVE BORDER GAPPING */
}
.products-item-details-table tr {
	width: 600px;
}
.products-item-details-table th {
	background-color: #ccc;
	color: #fff;
	
	font-size: 15px;
	font-weight: normal;
	
	width: auto;
	
	border: none;
	
	text-align: center;
	
	transition: all 0.25s ease-in-out;
}
.products-item-details-table td {
	background-color: #fff;
	
	width: 200px;
	
	text-align: left;
	
	transition: all 0.25s ease-in-out;
}
.products-item:hover .products-item-details-table th {
	background-color: #015c94;
	color: #fff;
	
	font-size: 15px;
	font-weight: normal;
	
	width: auto;
	
	border: none;
	
	text-align: center;
}
.products-item:hover .products-item-details-table td {
	background-color: #fff;
	color: #015c94;
	
	width: 200px;
	
	text-align: left;
}
.products-item-link {
	width: 100%;
	height: 20px;
	
	font-size: 16px;
	
	color: #ccc;
	
	text-decoration: none;
	
	cursor: pointer;
	
	transition: all 0.25s ease-in-out;
}
.products-item-link:hover {
	color: #666;
}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="info-9-btn" class="products-item" data-target="info-9" data-number="0">
        
        	<div class="products-item-label">NEW</div>
            
        	<div class="products-item-img buoy-9"></div><br />
            
            <div class="products-item-text">Round Buoy</div>
            
            	<div id="info-9" class="products-item-details toggleTarget">
            
            		<ul style="list-style:none; padding:0; height:auto;">
                    	
                        <li>500mm x 500mm</li>
                        <li>Foam Filled</li>
                        <li>Can be engineered into a floating barrier to designate work zones, cordon off weir walls and other dangerous water areas.</li>
                        <li>Can be fitted with a mooring tube and used as a mooring buoy.</li>
                        <li>Can be used for any water application, where needed.</li>
                    	
                    </ul>
                    
                    <p>Fully Owned and Made in Australia.</p>
                    <p>Roto Moulded in our fully automatic, gas compliant, Australian Standard Oven.</p>
            
            	</div>
                        
            <div class="toggleButton"></div>
        
        </div>

​

票数 1
EN

Stack Overflow用户

发布于 2016-12-06 02:25:00

将===更改为==，它将工作。

或者，在不带引号的情况下测试a === 0，然后在if/else中将值设置为不带引号的0或1。

问题是 method是“智能的”：如果data-number属性中的值可以转换为数字值，那么它将返回一个数字而不是一个字符串。

在您的例子中，您有data-number="0"，所以.data('number')返回0，而不是"0"。但是===测试类型相等，而==则允许类型强制。

(展开并运行以下命令，以确保它与==一起工作：)

​

代码语言：javascript
复制
$(document).ready(function(){
	
	$('.toggleTarget').hide();
	
	$(".products-item")
	.click(function() {
		
		var a = $(this).data('number');
		var toggleTargetId = $(this).attr('data-target');
        var toggleTarget = $(document.getElementById(toggleTargetId));
		
		if ( a == "0") {
			toggleTarget.show("slow", "swing");
			$(this).data('number','1');
		} else {
			toggleTarget.hide("slow", "swing");
			$(this).data('number','0');
		}
		
	});
	
});
代码语言：javascript
复制
.products-item {
	height: auto;
	width: 350px;
	
	display: inline-block;
	
	margin: 30px;
	
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	
	border: solid 2px #f5f5f5;
	border-radius: 10px;
	
	background-color: #f5f5f5;
	
	cursor: pointer;
	
	white-space: nowrap;
	
	vertical-align: top;
	
	transition: all 0.25s ease-in-out;
}
.products-item-label {
	width: 100px;
	height: auto;
	
	font-size: 12px;
	font-family: Comfortaa;
	
	display: block;
	
	position: relative;
	
	padding: 10px;
	
	left: -22px;
	
	color: #fff;
	background-color: #015c94;
	
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
.products-item-img {
	height: auto;
	width: auto;
	
	display: inline-block;
	
	border-radius: 190px;
	
	transition: all 0.25s ease-in-out;
	
	z-index: 10;
}
.products-item-text {
	width: auto;
	height: auto;
	
	bottom: 0px;
	left: 0px;
	
	margin: 10px;
	
	padding: 15px;
	
	display: inline-block;
	
	font-family: Comfortaa;
	font-size: 14px;
	
	text-align: center;
	
	border-radius: 5px;
	
	color: #333;
	background-color: transparent;
	
	transition: all 0.25s ease-in-out;
}
.products-item:hover {
	border: solid 2px #bae9ff;
	
	background-color: #bae9ff;
}
.products-item:hover .products-item-text {
	color: #015c94;
	
	border-radius: 5px;
}
.products-item:hover .products-item-details {
	color: #015c94;
	
	transition: color 0.25s ease-in-out;
}
.products-item-details {
	height: auto;
	width: 100%;
	
	padding-top: 0px;
	padding-bottom: 25px;
	
	font-size: 14px;
	
	text-align: center;
}
.products-item-details p {
	width: 350px;
	
	word-break: break-word;
	word-break: break-all;
	word-wrap: break-word;
	
	white-space: pre-wrap;
}
.products-item-details ul {
	width: 350px;
	
	margin: 0;
	
	display: inline-block;
}
.products-item-details li {
	width: 350px;
	
	padding-top: 5px;
	padding-bottom: 5px;
	
	text-align: center;
	
	overflow: hidden;
	
	word-wrap: break-word;
	
	white-space: pre-wrap;
}
.products-item-details-table {
	background-color: transparent;
	
	width: 100%;
	
	font-family: Comfortaa;
	font-size: 14px;
	
	padding-top: 20px;
	padding-bottom: 20px;
	
	table-layout: fixed;
	
	white-space: nowrap;
	
	/*border-collapse: collapse; REMOVE BORDER GAPPING */
}
.products-item-details-table tr {
	width: 600px;
}
.products-item-details-table th {
	background-color: #ccc;
	color: #fff;
	
	font-size: 15px;
	font-weight: normal;
	
	width: auto;
	
	border: none;
	
	text-align: center;
	
	transition: all 0.25s ease-in-out;
}
.products-item-details-table td {
	background-color: #fff;
	
	width: 200px;
	
	text-align: left;
	
	transition: all 0.25s ease-in-out;
}
.products-item:hover .products-item-details-table th {
	background-color: #015c94;
	color: #fff;
	
	font-size: 15px;
	font-weight: normal;
	
	width: auto;
	
	border: none;
	
	text-align: center;
}
.products-item:hover .products-item-details-table td {
	background-color: #fff;
	color: #015c94;
	
	width: 200px;
	
	text-align: left;
}
.products-item-link {
	width: 100%;
	height: 20px;
	
	font-size: 16px;
	
	color: #ccc;
	
	text-decoration: none;
	
	cursor: pointer;
	
	transition: all 0.25s ease-in-out;
}
.products-item-link:hover {
	color: #666;
}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="info-9-btn" class="products-item" data-target="info-9" data-number="0">
        
        	<div class="products-item-label">NEW</div>
            
        	<div class="products-item-img buoy-9"></div><br />
            
            <div class="products-item-text">Round Buoy</div>
            
            	<div id="info-9" class="products-item-details toggleTarget">
            
            		<ul style="list-style:none; padding:0; height:auto;">
                    	
                        <li>500mm x 500mm</li>
                        <li>Foam Filled</li>
                        <li>Can be engineered into a floating barrier to designate work zones, cordon off weir walls and other dangerous water areas.</li>
                        <li>Can be fitted with a mooring tube and used as a mooring buoy.</li>
                        <li>Can be used for any water application, where needed.</li>
                    	
                    </ul>
                    
                    <p>Fully Owned and Made in Australia.</p>
                    <p>Roto Moulded in our fully automatic, gas compliant, Australian Standard Oven.</p>
            
            	</div>
                        
            <div class="toggleButton"></div>
        
        </div>

​

票数 1
EN

Stack Overflow用户

发布于 2016-12-06 02:25:35

这是因为if ( a === "0") {正在检查类型和值。A是一个数字，"0“是一个字符串。将其更改为== "0“。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/40986736

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档