Javascript 单击span时更改主题

我需要一个函数，在单击引号时获取.themechoice span的id，并将其存储在变量'theme'中，以便下面的函数将节的主题更改为匹配的.themechoice span id

jq

html 头上的标签

        <style>
        .light {
            background-color: lightyellow;
            border: double lightgreen small;
            border-radius: 15px;
            padding: 1em;
            margin: 1em;
        }
        .dark {
            background-color: black;
            border: groove darkgray medium;
            border-radius: 15px;
            padding: 1em;
            margin: 1em;
        }
        .neutral {
            background-color: tan;
            border: inset brown thick;
            border-radius: 15px;
            padding: 1em;
            margin: 1em;
        }
        img {
            width: 200px;
        }   
    </style>

.光{
背景颜色：浅黄色；
花边：重瓣浅绿色小花；
边界半径：15px；
填充：1em；
边缘：1米；
}
.黑暗{
背景色：黑色；
边框：沟槽暗灰色介质；
边界半径：15px；
填充：1em；
边缘：1米；
}
.中立{
背景颜色：棕褐色；
边缘：深褐色；
边界半径：15px；
填充：1em；
边缘：1米；
}
img{
宽度：200px；
}   

正文中的html

<section>
  <p><h3>Pick a theme by clicking the quote you like most</h3></p>
  <span="" id="light" class="themeChoice"><p>Future's so bright, you'll need sunshades.</p></span>
  <span id="dark" class="themeChoice"><p>“Everyone is a moon, and has a dark side which he never shows to anybody.” -Mark Twain</p></span>
  <span id="neutral" class="themeChoice"><p>“The hottest place in Hell is reserved for those who remain neutral in times of great moral conflict.” -Martin Luther King, Jr.</p></span>
  </section>

通过单击您最喜欢的报价来选择主题

未来如此光明，你们需要遮阳棚

“每个人都是月亮，都有他从不向任何人展示的阴暗面。”-马克·吐温

“地狱里最热的地方是留给那些在道德冲突中保持中立的人的。”——马丁·路德·金

您可以使用

this.id

获取单击元素的id，这是此处的类名

$('.themeChoice').click(function() {
  var theme = this.id;
  $(this).parent("section").addClass(theme);
}); 

另外，在您的例子中，

的父元素是echoice

。您使用的选择器错误

下面给出了一个删除先前主题类并添加新主题类的稳定代码

$('.themeChoice').click(function() {
  var theme = this.id;
  var $parent = $(this).parent("section");
  $parent.removeClass($parent.data("theme")).addClass(theme);
  $parent.data("theme", theme);
});

---

您可以使用

this.id

获取被单击元素的id，这就是这里的类名

$('.themeChoice').click(function() {
  var theme = this.id;
  $(this).parent("section").addClass(theme);
}); 

另外，在您的例子中，

的父元素是echoice

。您使用的选择器错误

下面给出了一个删除先前主题类并添加新主题类的稳定代码

$('.themeChoice').click(function() {
  var theme = this.id;
  var $parent = $(this).parent("section");
  $parent.removeClass($parent.data("theme")).addClass(theme);
  $parent.data("theme", theme);
});

jQuery（）.click（）

函数接受回调，就像您添加的回调一样。在单击元素的上下文中调用该回调，因此单击处理程序中的该引用了单击的元素，因此您可以执行以下操作：

$('.themeChoice').click(function() {
   var theme = $(this).attr('id'); //Should return the id of clicked element a shortcut would be this.id like mentioned by another user
  //Your class adding stuff
});

jQuery（）.click（）

函数接受回调，就像您添加的回调一样。在单击元素的上下文中调用该回调，因此单击处理程序中的该引用了单击的元素，因此您可以执行以下操作：

$('.themeChoice').click(function() {
   var theme = $(this).attr('id'); //Should return the id of clicked element a shortcut would be this.id like mentioned by another user
  //Your class adding stuff
});

---

谢谢。我最终使用了这个，效果非常好：

$('.themeChoice').click(function() {
var theme = this.id;
$('section').addClass(theme);
});

---

谢谢你们两位。我的帮助很大。

谢谢。我最终使用了这个，效果非常好：

$('.themeChoice').click(function() {
var theme = this.id;
$('section').addClass(theme);
});

谢谢你们两位，这对我帮助很大