单击图像显示和隐藏div? [英] show and hide div on click on image?
问题描述
我试图在html和javascript中单击+图像时显示和隐藏div.
它可以正常工作，但问题是，我想在页面加载时隐藏sub div.
I am trying to show and hide div on click on + image in html and javascript.
It is working but the problem is, I want the hide the sub div on page load.
当我在内部脚本中添加$(".sub").hide();时，sub div在页面加载时隐藏，但是带有+符号的按钮图像在正常工作后的头两次不起作用.
When I add $(".sub").hide(); this to inside script then sub div is hide on page load but that button image with + sign do not work for first two times after that it work normally.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<body>
<table data-toggle="table" data-url="tables/data1.json"
data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1"
data-pagination="true" data-sort-name="name"
data-sort-order="desc">
<thead>
<tr>
<th data-checkbox="true"></th>
<th data-field="state" data-sortable="true">Category Name</th>
<th data-field="state" data-sortable="true">Product Image </th>
<th data-field="state" data-sortable="true">Product Name </th>
<th data-field="state" data-sortable="true">Seller Name</th>
<th data-field="state" data-sortable="true">Price</th>
<th data-field="state" data-sortable="true">Last Price 1</th>
<th data-field="state" data-sortable="true">Last Price 2</th>
<th data-field="state" data-sortable="true">Seller Rating</th>
</tr>
</thead>
<tr>
<td><img src="http://www.bls.gov/images/icons/icon_small_plus.gif"
class="image1" id="image1" onclick=diffImage(this) /></td>
<td><p>a </p></a></td>
<td><img src="http://www.thatpetplace.com/c.1043140/site/img/photo_na.jpg"
style="width:100px;height:100px;"/></td>
<td><p>b</p></a></td>
<td><p>c</p></td>
<td><p>d</p></td>
<td><p>e</p></td>
<td><p>f</p></td>
<td><p>g</p></td>
<td>
<a href="/change" name ='i'>
<i class="fa fa-trash-o fa-fw" ></i> Delete </a>
</td>
</tr>
<div id= "sub" class="sub">
<tr class="sub" id="fd" >
<td></td><td></td>
<td></td>
<td colspan="6">
<table style="width:100%;font-size: 14px;" align="right" bgcolor="#A0A0A3" >
<!-- <th class = "tab">Product Image </th> -->
<th class = "tab">Product Name </th>
<th class = "tab">Seller Name</th>
<th class = "tab">Price</th>
<th class = "tab">Last Price 1</th>
<th class = "tab">Last Price 2</th>
<th class = "tab">Seller Rating</th>
<tr>
<td>
<a href="ffds"><p>a</p></a>
</td>`
<td>
<p class = "tab">b</p>
</td>
<td>
<p class = "tab">c</p>
</td>
<td>
<p class = "tab">d</p>
</td>
<td>
<p class = "tab">e</p>
</td>
<td>
<p class = "tab">f</p>
</td>
<td>
<a href="/change_sub" name = "g" onclick="location.href=this.href+'?key=<%= doc[e]._id %>';return false;">
<i class="fa fa-trash-o fa-fw"></i> Delete </a>
</td>
</tr>
</table>
</td>
</tr>
</div>
</table>
<script>
$(".sub").hide();
function diffImage(img)
{
if(img.src.match("http://olenka.med.virginia"))
{
img.src = "http://www.bls.gov/images/icons/icon_small_plus.gif";
$(".image1").click(function()
{
$(this).closest('tr').next('.sub').hide();
});
}
else
{
img.src = "http://olenka.med.virginia.edu/psi/images/icons/minus_icon.png";
$(".image1").click(function(){
$(this).closest('tr').next('.sub').show();
});
}
}</script>
</body>
推荐答案
在当前代码中，当您单击该image时，您试图添加新的onclick处理程序.然后根据img的src添加其他处理程序.原因是您需要至少单击两次，事件才能正常运行，第一次添加hide事件，第二次添加show事件，等等.
In your current code, you're trying to add new onclick handler when you click that image. And you add different handler based on the img's src. The cause is that you need to click at least twice, the event will then act normally, the first time you add a hide event, the seconed time you add a show event, and so on.
请注意，注册一个新事件不会覆盖前一个事件，因为它按注册顺序执行处理程序，因此似乎可以正常工作，因此添加奇数单击，注册一个新的hide，最后将其调用，在偶数时间，您注册一个show.它只会使您在页面中注册越来越多的事件，应该避免.
Note that register a new event won't override the previous one, it seems to work normal because it executes the handler by register order, so add odd click, you register a new hide that would be called last, and at even time, you register a show. It just make you register more and more events in your page, and should be avoid.
您只需要删除寄存器部分，并将隐藏和显示逻辑移出即可，它应该可以正常工作.
You just have to remove the register part, and move the hide and show logic out, and it should work fine.
function diffImage(img) {
if(img.src.match("http://olenka.med.virginia")) {
img.src = "http://www.bls.gov/images/icons/icon_small_plus.gif";
$(img).closest('tr').next('.sub').hide();
} else {
img.src = "http://olenka.med.virginia.edu/psi/images/icons/minus_icon.png";
$(img).closest('tr').next('.sub').show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body>
<table data-toggle="table" data-url="tables/data1.json" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc">
<thead>
<tr>
<th data-checkbox="true"></th>
<th data-field="state" data-sortable="true">Category Name</th>
<th data-field="state" data-sortable="true">Product Image</th>
<th data-field="state" data-sortable="true">Product Name</th>
<th data-field="state" data-sortable="true">Seller Name</th>
<th data-field="state" data-sortable="true">Price</th>
<th data-field="state" data-sortable="true">Last Price 1</th>
<th data-field="state" data-sortable="true">Last Price 2</th>
<th data-field="state" data-sortable="true">Seller Rating</th>
</tr>
</thead>
<tr>
<td>
<img src="http://www.bls.gov/images/icons/icon_small_plus.gif" class="image1" id="image1" onclick=diffImage(this) />
</td>
<td>
<p>a</p>
</a>
</td>
<td>
<img src="http://www.thatpetplace.com/c.1043140/site/img/photo_na.jpg" style="width:100px;height:100px;" />
</td>
<td>
<p>b</p>
</a>
</td>
<td>
<p>c</p>
</td>
<td>
<p>d</p>
</td>
<td>
<p>e</p>
</td>
<td>
<p>f</p>
</td>
<td>
<p>g</p>
</td>
<td>
<a href="/change" name='i'> <i class="fa fa-trash-o fa-fw"></i> Delete</a>
</td>
</tr>
<div id="sub" class="sub">
<tr class="sub" id="fd">
<td></td>
<td></td>
<td></td>
<td colspan="6">
<table style="width:100%;font-size: 14px;" align="right" bgcolor="#A0A0A3">
<!-- <th class = "tab">Product Image </th> -->
<th class="tab">Product Name</th>
<th class="tab">Seller Name</th>
<th class="tab">Price</th>
<th class="tab">Last Price 1</th>
<th class="tab">Last Price 2</th>
<th class="tab">Seller Rating</th>
<tr>
<td>
<a href="ffds">
<p>a</p>
</a>
</td>
<td>
<p class="tab">b</p>
</td>
<td>
<p class="tab">c</p>
</td>
<td>
<p class="tab">d</p>
</td>
<td>
<p class="tab">e</p>
</td>
<td>
<p class="tab">f</p>
</td>
<td>
<a href="/change_sub" name="g" onclick="location.href=this.href+'?key=<%= doc[e]._id %>';return false;"> <i class="fa fa-trash-o fa-fw"></i> Delete</a>
</td>
</tr>
</table>
</td>
</tr>
</div>
</table>
<script>
$(".sub").hide();
function diffImage(img) {
if(img.src.match("http://olenka.med.virginia")) {
img.src = "http://www.bls.gov/images/icons/icon_small_plus.gif";
$(img).closest('tr').next('.sub').hide();
} else {
img.src = "http://olenka.med.virginia.edu/psi/images/icons/minus_icon.png";
$(img).closest('tr').next('.sub').show();
}
}
</script>
</body>
这篇关于单击图像显示和隐藏div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
