单击图像显示和隐藏div？

时间：2015-11-02 07:41:19

标签： javascript jquery html css

我试图在点击html和javascript中的+图片时显示和隐藏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> -->
    	 <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 个答案:

答案 0 :(得分：3)

在您当前的代码中，当您单击image时，您尝试添加新的onclick处理程序。然后根据img的src添加不同的处理程序。原因是您需要至少点击两次，事件将正常运行，第一次添加隐藏事件，添加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>

相关问题
最新问题