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 的 antyhing，所以这就是我得到大量代码的原因）...

我为每个结果生成了一行： Mostrar resultado n1

单击该行并调用以下事件：

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

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

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

好的，那么我该怎么做才能只使用一次该事件？否则我必须给出 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

使用 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 回答
0

我这样做是为了让它工作：

创建了一个名为 resultado 的 div，里面有一个 href，它有类 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 回答