顯示並隱藏div點擊圖片？

我想在html和javascript中點擊+圖片來顯示和隱藏div。它正在工作，但問題是，我想隱藏頁面加載的子div。顯示並隱藏div點擊圖片？

當我將$(".sub").hide();添加到內部腳本中時，子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> --> 
 
    \t <th class = "tab">Product Name </th> 
 
    \t <th class = "tab">Seller Name</th> 
 
    \t <th class = "tab">Price</th> 
 
    \t <th class = "tab">Last Price 1</th> 
 
    \t <th class = "tab">Last Price 2</th> 
 
     <th class = "tab">Seller Rating</th> 
 

 
     <tr> 
 
     <td> 
 
    \t \t <a href="ffds"><p>a</p></a> 
 
    \t \t </td>` 
 
    \t <td> 
 
    \t \t <p class = "tab">b</p> 
 
    \t \t </td> 
 
    \t <td> 
 
    \t \t <p class = "tab">c</p> 
 
    \t \t </td> 
 
    \t <td> 
 
    \t \t <p class = "tab">d</p> 
 
    \t \t </td> 
 
    \t <td> 
 
    \t \t <p class = "tab">e</p> 
 
    \t \t </td> 
 
    \t <td> 
 
    \t \t <p class = "tab">f</p> 
 
    \t \t </td> 
 
    \t <td> 
 
    \t \t <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> 
 
    \t </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(); 
 
    \t \t \t }); 
 
    \t } 
 
    else 
 
     { 
 
      img.src = "http://olenka.med.virginia.edu/psi/images/icons/minus_icon.png"; 
 
    \t  $(".image1").click(function(){ 
 
    \t \t \t \t $(this).closest('tr').next('.sub').show(); 
 
    \t \t \t \t \t  }); 
 
    \t } 
 
    }</script> 
 

 
</body>

來源

2015-11-02 Shubham Batra

試試這個'$（「子」）切換（）;' –

在你現在的代碼，你要添加新的onclick處理器，當您單擊image。你可以根據img的src添加不同的處理程序。原因是，您需要點擊至少兩次，然後事件才能正常運行，第一次添加隱藏事件，添加演出事件的時間，等等。

請注意，註冊一個新事件不會覆蓋前一個，它似乎正常工作，因爲它通過註冊順序執行處理程序，所以添加奇怪的點擊，您註冊一個新的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>

來源

2015-11-02 07:56:24 fuyushimoya

由於現在的作品。 –

圖片切換被阻止。圖片標誌不會改變點擊 –

它似乎沒有改變你的原產地代碼。我無法直接訪問該減號圖標，您是否確定它是有效的？ – fuyushimoya

顯示並隱藏div點擊圖片？

回答

相關問題