jquery - 如何指定要更改背景颜色的元素jquery

Question

我制作了一个简单的网站，其中有一个幻灯片。

图片幻灯片是自动的，在页面右侧我有一个带有 6 个按钮的菜单。当我按下“button1”时，“button1”的图片出现，当我点击“button2”时，“button2”的图片出现等等。

我想做的事情:

当我的幻灯片发生变化时，6 个按钮中的一个按钮的背景颜色发生变化，以指示正在显示的图片与该按钮相关。

例子:

Slideshow:
picture1 appears -----> button1 gets background color changed
picture2 appears -----> button2 gets background changed 
etc.

我的代码:

$(".showcase-thumbnail-content").removeClass("active, passive"); 
$(".showcase-thumbnail-content").addClass("active"); 

这解决了所有按钮的颜色都会改变的问题，而不仅仅是一次改变一个。

所有按钮都在 div 类 showcase-thumbnail-content我考虑过为每个按钮创建一个单独的 div 但我的主要问题是:

幻灯片显示“picture1”时，如何让只有“button1”改变背景颜色？

我已尽我所能，如果需要更多信息，请询问。

编辑:

由于页面上有很多代码，我不太清楚哪些部分与这里最相关，所以如果有人愿意花时间看这里:

http://showcase.awkwardgroup.com/index2.html

我正在使用演示 2，并进行了我自己的修改。

已完成以下更改:

CSS:

.showcase-thumbnail-content {
    /* padding: 10px;
    text-align: center;
    padding-top: 25px; */

    background: #ededed;
    padding: 5px 15px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    color: #777;
    text-decoration: none;
    font: bold 0.8em arial, sans-serif;
    width: 120px;
    font-size: 130%;
    cursor: hand;
    cursor: pointer;
}
            }
.showcase-thumbnail-content:hover {
    color:#F77B0F!Important;
}

.active {
    background: red;
}

html 更改:

展示幻灯片:

<div class="showcase-slide">
            <!-- Put the slide content in a div with the class .showcase-content. -->
            <div class="showcase-content">
                <img src="images/01.jpg" alt="01" />
            </div>
            <!-- Put the thumbnail content in a div with the class .showcase-thumbnail -->
            <div class="showcase-thumbnail">
                <!-- <img src="images/01.jpg" alt="01" width="140px" /> -->
                <!-- The div below with the class .showcase-thumbnail-caption contains the thumbnail caption. -->
                <p class="showcase-thumbnail-content">First</p>
                <!-- The div below with the class .showcase-thumbnail-cover is used for the thumbnails active state. -->
                <!-- <div class="showcase-thumbnail-cover"></div> -->
            </div>
            <!-- Put the caption content in a div with the class .showcase-caption -->
            <div class="showcase-caption">
                <h2>Be creative. Get Noticed!</h2>
            </div>
        </div> 

//六个元素都这样做(完全一样)

脚本代码与 demo2 中的相同，只是我在上面进行了修改。

如果需要更多信息，请询问。

Answer 1

fiddle 中的示例. jquery脚本示例如下:

$(".button").click(function() {
  if ($(this).hasClass('active')==true)
  {
     $(this).removeClass("active"); 
     $(this).addClass("passive"); 
  }
  else
  {
    $(this).addClass("active"); 
    $(this).removeClass("passive"); 
  }
 });​