Question

嗨我有问题......

我必须使用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个结果，因此考虑到不同的值（我不应该使用不是.hide（）和.slide的antyhing，插入代码5次，这就是为什么我得到代码的原因） ...

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

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

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

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

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

好的，那么我该怎么做才能只使用一次这个事件？否则我必须给出5个不同的ID并将脚本放置5次......

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

Answer 2

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();          
    }); 
});

这取决于show results链接与html中的结果块的顺序相同。

Answer 3

我这样做是为了让它发挥作用：

创建一个名为resultado的div，其中包含一个href，它具有类mostrar，我发布的块具有类数据，这是生成它的结果脚本：

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

如何使用jquery委托方法？

3 个答案: