показать и скрыть div на нажмите на картинку?

Я пытаюсь показать и скрыть div нажми на + изображение в html и javascript. Он работает, но проблема в том, что я хочу, чтобы скрыть sub div на загрузке страницы.показать и скрыть 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> --> 
 
    \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's 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>

источник

2015-11-02 07:56:24 fuyushimoya

Благодаря теперь он работает. –

сейчас Переключение изображения заблокировано. Значок изображения не изменяется при нажатии –

Кажется, что он не изменился в исходном коде. Я не могу напрямую получить доступ к этой минусовой значке, не могли бы вы убедиться, что она действительна? – fuyushimoya

показать и скрыть div на нажмите на картинку?

ответ

Смежные вопросы