Question

所以下面我有一些我正在使用的代码。现在，如果您刚刚启动网站，#picture div有一个背景图像，如果您按下任何一个按钮，该图片将替换为其他图片。

所以我无法弄清楚按钮会在按下按钮后如何改变它们的作用。假设您单击按钮1并替换背景图像。我希望按钮识别该div中的背景图像并相应地更改功能，在我的情况下，我希望它们更改它们替换当前图像的图像。

如果#picture的当前背景是X，你有ABC选择，如果#picture的背景为Y，你有DEF选择，可能是TLDR解释。

 <div id="adventure">
        <div class="picture">
        </div>

        <div id="choice">
            <button class="button1">Val 1</button>
            <button class="button2">Val 2</button>
            <button class="button3">Val 3</button>
        </div>
    </div>

$('.button1').click(function() {
    $('.picture').css('background-image',
        'url("image1")'
    );
});

  $('.button2').click(function() {
    $('.picture').css('background-image',
        'url("image2")'
    );
});

  $('.button3').click(function() {
    $('.picture').css('background-image',
        'url("image3")'
    );
});

我可能会以一种糟糕的方式做这件事，但我真的不知道如何做到这一点。我只能想到一种方法，那就是根据#picture div中的背景而有一堆if语句，但我不知道如何实现它。

Answer 1

此演示依赖于类.active，它确定哪些按钮（称为.group）可见，而其他.group仍然不存在。 #switch按钮将切换每个组。

您必须根据所属图像的ID来命名图像。

示例：

Button的HTML

<button id="image_of_sky.png">D</button>

图片的网址

http://domain.com/path/to/image_of_sky.png

jQuery img变量

var img = "http://domain.com/path/to/"+btn;

代码段

$('.button').click(function() {
  var btn = $(this).attr('id');
  var img = "https://placehold.it/330x150?text=" + btn;
  $('.picture').css('background-image',
    'url(' + img + ')'
  );
});

$('#switch').click(function() {
  var act = $('.group.active');
  var next = act.next();
  act.removeClass('active');
  next.addClass('active');
  if (act.attr('id') == "choiceGHI") {
    $('#choiceABC').addClass('active');
  }
});

#adventure {
  width: 395px;
}
.picture {
  width: 330px;
  height: 150px;
  border: 1px outset grey;
}
.group {
  width: 330px;
  display: none;
  padding: 0;
}
.button {
  width: 32.5%;
  margin: 0;
}
.active {
  display: block;
}
#switch {
  float: right;
  margin: -20px 0 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="adventure">
  <div class="picture"></div>


  <div id="choiceABC" class="group active">
    <button id="Image1" class="button">A</button>
    <button id="Image2" class="button">B</button>
    <button id="Image3" class="button">C</button>
  </div>
  <div id="choiceDEF" class="group">
    <button id="Image4" class="button">D</button>
    <button id="Image5" class="button">E</button>
    <button id="Image6" class="button">F</button>
  </div>
  <div id="choiceGHI" class="group">
    <button id="Image7" class="button">G</button>
    <button id="Image8" class="button">H</button>
    <button id="Image9" class="button">I</button>
  </div>
  <button id="switch">Switch</button>
</div>

更改网站中按钮的功能

1 个答案: