OnClick没有第一次工作

时间：2016-12-06 02:16:23

标签： javascript jquery html css3

我尝试了许多不同的方法来解决这个问题，但不幸的是我一直无法找到解决方案。 （是的，我甚至试图寻找无效的解决方案。）

触发器不会在第一次运行时运行，但它确实在那之后工作。我尝试将targetToggle设置为0，但仍然无效。

对此有任何帮助将不胜感激！

＆＃13;
＆＃13; 
$(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');
    }
  });
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

使用(a=="0")代替(a === 0)

Difference between == and === in 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');
		}
		
	});
	
});
.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;
}
<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 :(得分：1)

将===更改为==，它会有效。

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

问题是.data() method是＆＃34; smart＆＃34;：如果data-number属性中的值可以转换为数值，那么它返回一个数字而不是一个字符串

在您的情况下，您有data-number="0"，因此.data('number')会返回0，而不是"0"。但===测试类型相等，而==允许类型强制。

（展开并运行以下内容，使其与==配合使用：）

＆＃13;
＆＃13; 
$(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');
		}
		
	});
	
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

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

相关问题
最新问题