对 jquery 中的每个 span 元素使用函数

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 处理程序。

改为使用选择器在元素上定义点击事件，如下所示：

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

这基本上是您的第一个场景。第二个将与$('.titles a:last')... 类推。

查看 on、selectors 和 traversing 的 jQuery 文档

---

更新

这是一个有效的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();
    });​