0

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

我有一系列按钮可以更改具有相同类名的一组 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>

4

2 回答 2

0

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

<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 的图像名称

于 2021-04-13T15:46:30.047 回答
0
  • 将所需的图像名称存储在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>

于 2021-04-12T19:08:55.473 回答