使用 jQuery 在多个背景图像之间切换的更好方法

Question

有没有更好的方法来编写这个函数，而不是为每个图像更改选项重复它？

我有一系列按钮可以更改一组具有相同类名的 div 的背景图像，只是想知道是否有更快或更好的方法。

<script type="text/javascript">
    $(function() {
    $('#redbrick').click(function() {
        $('.imagebg').css('background-image', 'url(bg/red-brick-wall.jpg)');
    });
    $('#brownbrick').click(function() {
        $('.imagebg').css('background-image', 'url(bg/brown-brick-wall.jpg)');
    });
    $('#blackbrick').click(function() {
        $('.imagebg').css('background-image', 'url(bg/black-brick-wall.jpg)');
    });
    $('#grass').click(function() {
        $('.imagebg').css('background-image', 'url(bg/green-grass.jpg)');
    });
    $('#timber').click(function() {
        $('.imagebg').css('background-image', 'url(bg/timber-bg.jpg)');
    });
    });
</script>

      <button id="redbrick">Red Brick</button>
      <button value="brownbrick" id="brownbrick">Brown Brick</button>
      <button value="blackbrick" id="blackbrick">Black Brick</button>
      <button value="grass" id="grass">Grass</button>
      <button value="timber" id="timber">Timber</button>

<div id="a1" class="imagebg"></div>
<div id="a2" class="imagebg"></div>
<div id="a3" class="imagebg"></div>
<div id="a4" class="imagebg"></div>
<div id="a5" class="imagebg"></div>

Answer 1

好的，我设法通过这样做来简化代码

<script type="text/javascript">
    // change background image of results
    function bgChange(bgID) {
        $('.imagebg').css('background-image', 'url(bg/' + bgID + '.jpg)');
    }
</script>

<button type="button" id="red-brick-wall" onClick="bgChange(this.id)">Red Brick</button>
<button type="button" id="brown-brick-wall" onClick="bgChange(this.id)">Brown Brick</button>
<button type="button" id="black-brick-wall" onClick="bgChange(this.id)">Black Brick</button>
<button type="button" id="green-grass" onClick="bgChange(this.id)">Grass</button>
<button type="button" id="timber-bg" onClick="bgChange(this.id)">Timber</button>

<div id="a1" class="imagebg"></div>
<div id="a2" class="imagebg"></div>
<div id="a3" class="imagebg"></div>
<div id="a4" class="imagebg"></div>
<div id="a5" class="imagebg"></div>

所以按钮 id 是传递给 css 的图像名称

Answer 2

• 将所需的图像名称存储在按钮的data-* 属性中
• 不要忘记始终将type="button" 用于不属于提交类型的<button> 元素。

jQuery($ => { // DOM ready and $ alias in scope.

  const $imagebg = $('.imagebg');

  $("[data-bg]").on("click", function() {
    $imagebg.css({backgroundImage: `url(bg/${this.dataset.bg}.jpg)`});
  });

});

<button type="button" data-bg="red-brick-wall">Red Brick</button>
<button type="button" data-bg="brown-brick-wall">Brown Brick</button>
<button type="button" data-bg="black-brick-wall">Black Brick</button>
<button type="button" data-bg="green-grass">Grass</button>
<button type="button" data-bg="timber-bg">Timber</button>

<div class="imagebg"></div>
<div class="imagebg"></div>

演示：

jQuery($ => { // DOM ready and $ alias in scope.

  const $imagebg = $('.imagebg');

  $("[data-bg]").on("click", function() {
    console.log(this.dataset.bg)
    $imagebg.css({
      backgroundImage: `url(http://placehold.it/960x600/b0f/fff&text=${this.dataset.bg}`
    });
  });

});

.imagebg {
  width: 100px;
  height: 100px;
  outline: 1px solid red;
  background-size: cover;
}

<button type="button" data-bg="red-brick-wall">Red Brick</button>
<button type="button" data-bg="brown-brick-wall">Brown Brick</button>
<button type="button" data-bg="black-brick-wall">Black Brick</button>
<button type="button" data-bg="green-grass">Grass</button>
<button type="button" data-bg="timber-bg">Timber</button>

<div class="imagebg"></div>
<div class="imagebg"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>