0

こんにちは、問題があります...

PHPを使用してmysqlクエリから生成されたすべての結果を表示する必要があります。最終的に、短縮された「ブロック」を次のように生成します。

<div class="resultado">

    <div class="titulo_articulo">

        <h2>Título del artículo</h2>

    </div>

    <div class="detalles_articulo">    

        <div class="datos_articulo">    

            <div class="encabezado_autores">
                <img src="images/gente.png"><span> AUTORES</span>
            </div>

            <div class="autores_instituciones">
                <li>Daniel OC - UTPL</li>
                <li>Francisco V - UTPL</li>
            </div>      

        </div>

    </div>

</div>

検索で 5 つの結果が返される場合があるため、異なる値を考慮してコードが 5 回挿入されます (.hide() と .slide ではないアンチイングを使用することは想定されていないため、コードが大量に発生します)...

結果ごとに生成された行があります: Mostrar resultado n1

その行がクリックされ、次のイベントが呼び出されます。

<script type="text/javascript">
    $(document).ready(function(){

        $(".resultado").hide(); 

        $('.mostrar').click(function(e){
            $(".resultado").slideToggle();          
        }); 
    });
</script>

では、そのイベントを 1 回だけ使用するにはどうすればよいでしょうか。それ以外の場合は、5 つの異なる ID を指定して、スクリプトを 5 回配置する必要があります...

4

3 に答える 3

1

使いやすさのために を割り当てる必要がありますID。この部分に関しては、クラスはあまり問題ありません。

<div class="mostrar" id="mostrarn1">Click me to show/hide result 1</div>
<div class="resultado" id="mostrarn1result">
    <div class="titulo_articulo">
        <h2>Título del artículo</h2>
    </div>
    <div class="detalles_articulo">    
        <div class="datos_articulo">    
            <div class="encabezado_autores">
                <img src="images/gente.png"><span> AUTORES</span>
            </div>
            <div class="autores_instituciones">
                <li>Daniel OC - UTPL</li>
                <li>Francisco V - UTPL</li>
            </div>      
        </div>
    </div>
</div>

<div class="mostrar" id="mostrarn2">Click me to show/hide result 2</div>
<div class="resultado" id="mostrarn2result">
    <div class="titulo_articulo">
        <h2>Título del artículo</h2>
    </div>
    <div class="detalles_articulo">    
        <div class="datos_articulo">    
            <div class="encabezado_autores">
                <img src="images/gente.png"><span> AUTORES</span>
            </div>
            <div class="autores_instituciones">
                <li>Daniel OC - UTPL</li>
                <li>Francisco V - UTPL</li>
            </div>      
        </div>
    </div>
</div>
<script type="text/javascript">
 $('.resultado').hide();
    $('.mostrar').click(function(e){
        var divId = $(this).attr('id');
        $('#'+divId+'result').slideToggle();       
    }); ​
</script>
于 2012-08-22T06:45:18.887 に答える
0

私はそれを機能させるためにこれをしました：

その中にa hrefを含むresultadoというdivを作成しました。クラスmostrarがあり、投稿したブロックにはクラスdatosがあります。これは、それを作成した結果のスクリプトです。

<script type="text/javascript">
    $(document).ready(function(){

        $(".datos").hide();

        $('.resultado').delegate('.mostrar','click',function(event){

          $(this).parent().find(".datos").slideToggle();

        }); 
    });
</script>

HTMLはこうなりました

<div class="resultado">

    <a class="mostrar" href="#">Mostrar/Ocultar resultado 1</a>

    <div class="datos">

        <div class="titulo_articulo">

            <h2>Título del artículo</h2>

        </div>

        <div class="detalles_articulo">    

            <div class="datos_articulo">    

                <div class="encabezado_autores">

                    <img src="images/gente.png"><span> AUTORES</span>

                </div>

                <div class="autores_instituciones">

                    <li>Daniel OC - UTPL</li>
                    <li>Francisco V - UTPL</li>

                </div>      

            </div>

        </div>

    </div>

</div>
于 2012-08-22T07:23:26.053 に答える
0

html は次のようになります。

<div class="resultado">
...
</div>
<div class="resultado">
...
</div>
<div class="resultado">
...
</div>
<span class='mostrar' > Mostrar result 1</span>
<span class='mostrar' > Mostrar result 2</span>
<span class='mostrar' > Mostrar result 3</span>

次のようにして、目的の機能を実現できます。

$(document).ready(function(){

    $(".resultado").hide(); 

    $('.mostrar').click(function(e){
        var i = $(this).index('.mostrar');
        $(".resultado").eq(i).slideToggle();          
    }); 
});

これは、HTML 内の結果ブロックと同じ順序で表示される結果リンクに依存しています。

于 2012-08-22T07:08:45.247 に答える