Javascript 如何使用jquery构建此模板

我正在疯狂地尝试使用jquery制作这个模板，我请求您的帮助

图像创意链接-

我在上面有这4张图片。对于任何图像，我都有一个文本和一个大图像。当我点击这张图片时，一个新的文本和图片会出现 我在前端使用纯框架

================我的代码-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

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

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

---

没有发生任何事情

问题在于，您没有将顶部的4个图像与试图在底部显示的内容链接起来。因此，要修复代码，您需要：

在顶部图像中指定id或数据-*信息 为下面的内容div分配一个id 单击后，获取id并相应地显示内容 可能是这样的：

<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

---

你想要像tab单击第一幅图像这样的东西，第一幅图像相关数据将显示？标记中没有class=ImagensSelecionAvis，你的jQuery中应该是什么？现在，在你的代码中，当我单击时，一切都消失了。我将id=content{{{$primeiroValor++}更改为，并将$'.pure-g'.hide；到$'.show'.hide；第二个标签可以使用，但在第三个标签中，以前的内容保留下来，新的内容显示出来。我更改了一些信息。老兄，我非常非常感激，这很有效！

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

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