-1

これは私のcssであり、Jqueryは、テーブル内の画像がクリックされたときにテキストを表示するためにこの2つの関数を作成しました。テキストがクリックされると、画像が再び表示されます。

<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
4

1 に答える 1

0

目立たない JavaScript の jQuery アプローチに従い、インライン関数と onclick ハンドラーを避ける必要があります。

代わりに、セレクターを使用して、次のように要素のクリック イベントを定義します。

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

これは基本的に最初のシナリオです。2 番目は と同様に機能し$('.titles a:last')...ます。

on、セレクター、トラバースについては、jQuery のドキュメントを参照してください。

アップデート

これは、あなたが望むことをするはずの動作するjsFiddleです。上記のコードは完全には機能していません。特に、リンクを取得するためのセレクターが false です。フィドルからの更新は次のとおりです。

$('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();
    });​
于 2012-06-06T18:35:43.217 に答える