显示并隐藏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点击图片？

回答

相关问题