Question

我尝试使用jquery制作此模板时疯狂，我会请求您的帮助

图片创意LINK - https://imagizer.imageshack.us/v2/786x400q90/913/JZKWrp.png

我在顶部有这4张图片。对于任何图像，我有一个文字和一个大图像。当我点击此图像时，将显示新的文本和图片我在前端使用Pure Framework

=============我的代码 - html ===================

<div class="pure-u-17-24">
    <p class="tituloGrupo">Grupo</p>
    <img src="assets/images/front/grupo/grupo-bignardi-2.png" alt="Grupo Bignardi - Soluções em Papel" class="pure-img imagensSelecionaveis"/>  
    <img src="assets/images/front/grupo/bignardi-papeis.png" alt="Bignardi Papéis" class="pure-img imagensSelecionaveis"/>
    <img src="assets/images/front/grupo/jandaia.png" alt="Jandaia" class="pure-img imagensSelecionaveis"/>
    <img src="assets/images/front/grupo/jandaia-atacado.png" alt="Jandaia - Atacado em Papelaria" class="pure-img imagensSelecionaveis"/>
    <?php
        $primeiroValor = 0;
    ?>
    @foreach ($grupo as $grupo)
        @if($primeiroValor==0)
            <div class="pure-g show">
                <div class="pure-u-17-24 textoEmpresa">
                    {{$grupo->texto}}
                </div>
                <div class="pure-u-7-24">
                    <img src="assets/images/grupo/{{$grupo->imagem}}" alt="{{$grupo->titulo}}" class="imagemEmpresa pure-img"/>
                </div>
            </div>
            <?php
                $primeiroValor = 1;
            ?>
            @else
                <div class="pure-g hide">
                    <div class="pure-u-17-24 textoEmpresa">
                        {{$grupo->texto}}
                    </div>
                    <div class="pure-u-7-24">
                        <img src="assets/images/grupo/{{$grupo->imagem}}" alt="{{$grupo->titulo}}" class="imagemEmpresa pure-img"/>
                    </div>
                </div>
    </div>
            @endif
    @endforeach

===================我的代码 - Jquery =================

$(function() {
    $('.imagensSelecionaveis').click(function(){
        var pureg = $(this).parent().find('.pure-g');   
            if(!pureg.hasClass('show')) {
                pureg.addClass('hide').removeClass('show');
                pureg.slideDown(function() {
                    pureg.addClass('show').removeClass('hide');
                });
            }
    });
});

没有任何反应

Answer 1

问题是您没有将顶部的4个图像与您尝试在底部显示的内容相关联。因此，要修复代码，您需要：

在顶部图片中分配id或data- * info
为下面的内容div指定一个ID
点击后，获取ID并相应显示内容

DEMO FIDDLE

可能是这样的：

<div class="pure-u-17-24">
<p class="tituloGrupo">Grupo</p>
<img data-id="0" src="assets/images/front/grupo/grupo-bignardi-2.png" alt="Grupo Bignardi - Soluções em Papel" class="pure-img imagensSelecionaveis"/>  
<img data-id="1" src="assets/images/front/grupo/bignardi-papeis.png" alt="Bignardi Papéis" class="pure-img imagensSelecionaveis"/>
<img data-id="2" src="assets/images/front/grupo/jandaia.png" alt="Jandaia" class="pure-img imagensSelecionaveis"/>
<img data-id="3" src="assets/images/front/grupo/jandaia-atacado.png" alt="Jandaia - Atacado em Papelaria" class="pure-img imagensSelecionaveis"/>
<?php
    $primeiroValor = 0;
?>
@foreach ($grupo as $grupo)
    @if($primeiroValor==0)
        <div id="content0" class="pure-g show">
            <div class="pure-u-17-24 textoEmpresa">
                {{$grupo->texto}}
            </div>
            <div class="pure-u-7-24">
                <img src="assets/images/grupo/{{$grupo->imagem}}" alt="{{$grupo->titulo}}" class="imagemEmpresa pure-img"/>
            </div>
        </div>
        <?php
            $primeiroValor = 1;
        ?>
        @else
            <div class="pure-g hide">
                <div id="content{{$primeiroValor++}}" class="pure-u-17-24 textoEmpresa">
                    {{$grupo->texto}}
                </div>
                <div class="pure-u-7-24">
                    <img src="assets/images/grupo/{{$grupo->imagem}}" alt="{{$grupo->titulo}}" class="imagemEmpresa pure-img"/>
                </div>
            </div>
        @endif
@endforeach

和jQuery一样：

$(function() {
    $('.imagensSelecionaveis').click(function(){
        var id = $(this).data("id");
        $('.pure-g').hide();
        $('#content'+id).show();
    });
});

Answer 2

<div class="pure-g">
                <div class="pure-u-17-24">
                    <p class="tituloGrupo">Grupo</p>
                    <img data-id="0" src="assets/images/front/grupo/grupo-bignardi-2.png" alt="Grupo Bignardi - Soluções em Papel" class="pure-img imagensSelecionaveis"/>          
                    <img data-id="1" src="assets/images/front/grupo/bignardi-papeis.png" alt="Bignardi Papéis" class="pure-img imagensSelecionaveis"/>
                    <img data-id="2" src="assets/images/front/grupo/jandaia.png" alt="Jandaia" class="pure-img imagensSelecionaveis"/>
                    <img data-id="3" src="assets/images/front/grupo/jandaia-atacado.png" alt="Jandaia - Atacado em Papelaria" class="pure-img imagensSelecionaveis"/>

                    <?php
                        $primeiroValor = 0;
                    ?>
                        @foreach ($grupo as $grupo)
                            @if($primeiroValor==0)
                                <div id="content0" class="pure-g show empresasjavascript">
                                    <div class="pure-u-17-24 textoEmpresa">
                                        {{$grupo->texto}}
                                        <div class="pure-g-">
                                            <div class="pure-u-1 linkExterno">
                                                <a href="http://{{$grupo->link}}" target="_blank">PARA SABER MAIS, VISITE O WEBSITE DA {{$grupo->titulo}}</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="pure-u-7-24">
                                        <img src="assets/images/grupo/{{$grupo->imagem}}" alt="{{$grupo->titulo}}" class="imagemEmpresa pure-img"/>
                                    </div>
                                </div>
                                <?php
                                    $primeiroValor = 1;
                                ?>
                            @else
                                <div id="content{{$primeiroValor++}}" class="pure-g hide empresasjavascript">
                                    <div  class="pure-u-17-24 textoEmpresa">
                                        {{$grupo->texto}}
                                        <div class="pure-g-">
                                            <div class="pure-u-1 linkExterno">
                                                <a href="http://{{$grupo->link}}" target="_blank">PARA SABER MAIS, VISITE O WEBSITE DA {{$grupo->titulo}}</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="pure-u-7-24">
                                        <img src="assets/images/grupo/{{$grupo->imagem}}" alt="{{$grupo->titulo}}" class="imagemEmpresa pure-img"/>
                                    </div>
                                </div>
                            @endif
                        @endforeach


                </div>

================= JS =======================

$('.imagensSelecionaveis').click(function(){
    var id = $(this).data("id");        
    $('.empresasjavascript').addClass('hide').removeClass('show');
    $('#content'+id).addClass('show').removeClass('hide');
});

如何使用jquery构建此模板

2 个答案: