Question

单击按钮时，它们应显示其对应部分的内容-通过替换每次单击按钮上的图像来完成其位置的高亮显示的山峰...，还应显示包含文本的div元素下面的说明

（这是我在javascript中尝试得到的）

// Keep track of the button currently clicked
var activeBtn = null; 

function myFunction(btnId, divId) {
  var x = document.getElementById("myDIV");
  // If the last button is the same as the new one, show default text
  if (activeBtn === btnId) {
    x.innerHTML = "";
    activeBtn = null
  } else {
  // Else show the text given to the text param
    let ReplaceText = document.getElementById(divId).innerHTML;
     x.innerHTML= ReplaceText;
     activeBtn = btnId;
  }
}

function Show5s() {document.getElementById("image").src = "/wp-content/uploads/2019/09/amsterdam-5s.png";}

function Show30n() {document.getElementById("image").src = "/wp-content/uploads/2019/09/amsterdam-30n-fitness-center.png";}

function ShowFitness() {document.getElementById("image").src = "/wp-content/uploads/2019/09/amsterdam-30n-fitness-center.png";}

function ShowPortJervis() {document.getElementById("image").src = "/wp-content/uploads/2019/09/port-jervis.png";}

function ShowSaratoga() {document.getElementById("image").src = "/wp-content/uploads/2019/09/saratoga.png";}

function ShowCliftonPark() {document.getElementById("image").src = "/wp-content/uploads/2019/09/clifton-park.png";}

我想使用jquery做到这一点。我唯一的问题是，当单击另一个按钮时，我需要隐藏当前的div，但我一直无法弄清楚该怎么做。.pls帮助

jQuery(document).ready(function($){

$('.5s-button').on({
     'click': function(){
         $('#change-image').attr('src','/wp-content/uploads/2019/09/amsterdam-5s.png');
          $("#text1").toggle();

     }
 });

$('.30n-button').on({
     'click': function(){
         $('#change-image').attr('src','/wp-content/uploads/2019/09/amsterdam-30n-fitness-center.png');
          $("#text2").toggle();
     }
 });

$('.pj-button').on({
     'click': function(){
         $('#change-image').attr('src','/wp-content/uploads/2019/09/port-jervis.png');
         $("#text3").toggle();
     }
 });

$('.sara-button').on({
     'click': function(){
         $('#change-image').attr('src','/wp-content/uploads/2019/09/saratoga.png');
         $("#text4").toggle();
     }
 });
 $('.cp-button').on({
     'click': function(){
         $('#change-image').attr('src','/wp-content/uploads/2019/09/clifton-park.png');
         $("#text5").toggle();
     }
 });
});

Answer 1

您可以在data-attribute上添加2个buttons，一个添加img src，另一个添加目标div，如下所示：

<button class="btn" data-src="/wp-content/uploads/2019/09/amsterdam-5s.png" data-div="text1" >Button 1</button>

然后向您所有的divs

添加一个通用类

<div class="img-div"></div>

并对所有JQuery仅使用一个buttons事件

$('.btn').on('click', function(){
    $('.img-div').hide() //Hide all divs
    $('#change-image').attr('src', $(this).data('src')); //Change img src
    $('#' + $(this).data('div')).show() //Show the target div
});

Answer 2

您可以先隐藏所有/可见的文本div，然后显示相应的div，以实现此目的。另外，您还需要将id =“ btn1”更改为class =“ btn1”，因为id应该是唯一的。您可以做的另一件事是预加载图像以加快加载速度。这是执行此操作的代码

    <div class="button-container">
        <input type="button" value="5S" class="5s-button btn1" />
        <input type="button" value="30n" class="30n-button btn1" />
        <input type="button" value="Port Jarvis" class="pj-button btn1" />
        <input type="button" value="Saratoga" class="sara-button btn1" />
        <input type="button" value="Clifton Park" class="cp-button btn1" />
    </div>

    <img id="change-image" src="/wp-content/uploads/2019/09/base-location.png"
        alt="Black Image" />

    <div id="text1" style="display:none;" class="textDiv">
        <h2>5S</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.
        </p>
    </div>

    <div id="text2" style="display:none;" class="textDiv">
        <h2>30N</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.</p>
    </div>

    <div id="text3" style="display:none;" class="textDiv">
        <h2>Port Jervis</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.</p>
    </div>
    <div id="text4" style="display:none;" class="textDiv">
        <h2>Saratoga</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.</p>
    </div>
    <div id="text5" style="display:none;" class="textDiv">
        <h2>Clifton</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.</p>
    </div>

这是JS

    var images = new Array()
function preload() {
    for (i = 0; i < preload.arguments.length; i++) {
        images[i] = new Image()
        images[i].src = preload.arguments[i]
    }
}
preload(
    '/wp-content/uploads/2019/09/5s.png',
    '/wp-content/uploads/2019/09/fitness.png',
    '/wp-content/uploads/2019/09/port.png',
    '/wp-content/uploads/2019/09/sara.png',
    '/wp-content/uploads/2019/09/clift.png'
);


jQuery(document).ready(function ($) {

    $('.btn1').on('click', function () {
        var obj = getImageSrcText($(this).val());
        $('#change-image').attr('src', obj.src);
        $('.textDiv').hide();
        $('#' + obj.div).show();
    });

    function getImageSrcText(val) {
        switch (val) {
            case '5S':
                return { 'src': '/wp-content/uploads/2019/09/5s.png', 'div': 'text1' };
            case '30n':
                return { 'src': '/wp-content/uploads/2019/09/fitness.png', 'div': 'text2' };
            case 'Port Jarvis':
                return { 'src': '/wp-content/uploads/2019/09/port.png', 'div': 'text3' };
            case 'Saratoga':
                return { 'src': '/wp-content/uploads/2019/09/sara.png', 'div': 'text4' };
            case 'Clifton Park':
                return { 'src': '/wp-content/uploads/2019/09/clift.png', 'div': 'text5' };
        }
    }
});

这可以通过其他方法来实现，例如将image src和div选择器放在button数据属性中，并在单击时获取这些属性。

jQuery在按钮单击时隐藏所有其他div

2 个答案: