在單擊圖像時顯示和隱藏div？
[英]show and hide div on click on image?
問題描述
我試圖在html和javascript中單擊+圖像時顯示和隱藏div。 它正在工作，但問題是，我想在頁面加載時隱藏sub div。
當我添加$(".sub").hide(); 這到內部腳本中，然后sub div隱藏在頁面加載中，但是帶有+號的按鈕圖像在正常工作后的頭兩次無效。
<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>
1 個解決方案
解決方案1
3 已采納 2015-11-02 07:56:24
在當前代碼中，您嘗試在單擊該image時添加新的onclick處理程序。 然后根據img的src添加其他處理程序。 原因是您需要至少單擊兩次，事件才能正常運行，第一次添加hide事件，第二次添加show事件，依此類推。
請注意，注冊一個新事件不會覆蓋前一個事件，因為它按注冊順序執行處理程序，所以似乎正常工作，因此添加奇數單擊，您注冊了一個新的hide ，最后一次被調用，甚至在偶數時，您登記show 。 它只會使您在頁面中注冊越來越多的事件，因此應避免使用。
您只需要刪除寄存器部分，並將隱藏和顯示邏輯移出即可，它應該可以正常工作。
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 Class 點擊圖像按鈕
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.