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

Posted 2023-05-08

【中文标题】使用 jQuery 在多个背景图像之间切换的更好方法

【英文标题】：Better way to change between several background images with jQuery

【发布时间】：2021-07-07 20:58:06

【问题描述】：

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

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

【参考方案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 的图像名称

【参考方案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>

【讨论】：

感谢您的回复 Roko，我似乎无法正常工作，DW 只是在我放置该脚本、头部或正文的地方说语法错误......我假设 $imagebg 被设置为.imagebg ....我不明白 [data-change-brick] 是什么。除了对它的引用之外，它是如何被使用的

@dragon_sa wups，我在整个编辑过程中留下了错误的选择器。应该是更短的$("[data-bg]") 固定:)

@dragon_sa PS 代替this.dataset.bg（纯JS）你也可以使用$(this).data("bg")

它在检查器中抛出一个未捕获的错误，但在我看来这一切都关闭了......Uncaught SyntaxError: Unexpected token ')'.....

我更改为您建议的另一种方法 ($(this).data("bg")) 并且我还添加了 CDATA 标签，我还尝试更改 url 两侧的重音，并尝试了head 标签和 body 标签的底部......这是我正在使用的 jquery 库，如果这有什么不同......