jQuery中的每個跨度元素的使用函數

Question

這是我的CSS和JQuery我創建了這兩個函數來顯示文本，當點擊表格中的圖像時，然後如果點擊文本，它會再次顯示圖像。

<style> 
.espanto { 
    margin:0px 25px 0px 25px; 
    display:none; 
} 

</style> 
    <script> 
function showImage(){ 
       $('.espanto').show(); 
       $('.hide').hide(); 
      } 
      function hidonio(){ 
       $('.espanto').hide(); 
       $('.hide').show(); 
      } 
</script> 

然後我有這個結構。這裏是我的編碼表，並使用類來做到這一點

<div id="content"> 
    <p align="center"><span class="titles" style="color:#1A4487; line-height:10px;">Productos Artesanales Gourmet</span></p> 
    <div class="bar"></div> 
    <p class="parag" style=" ">Kanaan le ofrece una extensa seleccion de conservas, chutneys, aceites y salsas, que le brindaran ese sabor que usted estaba buscando, por favor no dude en contactarnos si desea una cotizacion o muestras gratis, de clic en alguna imagen para ver su descripcion.</p> 
    <p align="center"><span class="titles espanto" style="color:#1A4487; line-height:10px;"><br /> 
     Descripciones.</span></p> 
    <table align="center" style="color:#1A4487;" width="650" border="0"> 
     <tr> 
     <td width="250px"><p class="titles" align="center" > <span class="parag espanto"><br /> 
      <a href="#" onclick="hidonio()" >Producto de origen Hindú que sirve para acompañar y hornear carnes como pescado, pollo, cerdo, etc. Dándole un exquisito sabor a sus platillos, sabores: ciruela, tamarindo, carambolo, calabaza, durazno y piña</a></span><a href="#" onclick="showImage()" ><img src="pr/Chutneys 2.jpg" height="200" class="hide" /></a><br /> 
      Chutneys</p></td> 
     <td width="250px"><p class="titles" align="center"><span class="parag espanto"><br /> 
      <a href="#" onclick="hidonio()" > Aceites aderezados para saborizar carne y ensaladas de sabor canela, romero, laurel, thai, (rojo y picante), y hiervas finas</a></span><a href="#" onclick="showImage()" ><img src="pr/Aceites 2 a.jpg" height="200" class="hide"/></a><br /> 
      Aceites </p></td> 
     <td width="250px"><p class="titles" align="center"> <span class="parag espanto"><br /> 
      <a href="#" onclick="hidonio()" >Conservas dulces (frutas en almíbar)<br /> 
      De todo tipo de frutas (guayaba, mango, durazno, piña, camote, calabaza, etc.)<br /> 
      <br /> 
      Conservas saladas (encurtidos) 
      En salmuera o en vinagre (col morada, calabacita, espárragos, chichar 

Answer 1

您應該遵循不顯眼的JavaScript的jQuery的方法，避免內聯函數和onclick處理。

而是使用一個選擇你的元素定義click事件是這樣的：

$('.titles a:first').on('click', function(){ 
    $(this).closest('p').find('.espanto').hide(); 
    $(this).closest('p').find('.hide').show(); 
}); 

這基本上是你的第一個場景。第二個將與$('.titles a:last')...類似。

看一看jQuery的文檔on，selectors和traversing

---

更新

這裏是一個工作jsFiddle應該做你想做的。上面的代碼不完全工作，尤其是選擇器是錯誤的以獲取鏈接。下面是從小提琴的更新：

$('table td').find('a:first').on('click', function(){ 
    $(this) 
     .parent() 
      .hide() 
     .parent().find('img').show(); 
}).end() 
    .find('a:last').on('click', function(){ 
     $(this).hide() 
      .closest('td').find('span:first').show(); 
    });​