jquery - 有条件地仅添加类名

Question

我正在使用一个插件来确定 div 的背景颜色的亮度，并动态地为其应用“亮”或“暗”类。我正在尝试获取该类并将其应用于另一个 div，以便根据返回值对其进行样式设置。

var topbar = $(".top-bar");
if ($(".quote-block").is( "dark" ) ) {
    topbar.addClass('background--dark');
};
if ($(".quote-block").is( "light" ) ) {
    topbar.addClass('background--light');
};

然而，为了简化这一点，理想的做法是只返回类名并将其附加到“背景--”(即:“背景--”加上插件产生的“暗”类，导致 .background--dark).我怎样才能用 JQ 实现这个目标？显然我是新手，所以任何见解都将不胜感激。

这是预期的结构:

<nav class="top-bar"></nav>
<div class="main-content">
    <section class="quote-block light<--dynamic class"></section>
    <section class="quote-block dark<--dynamic class"></section>
</div>

Answer 1

这是我编造的，因为您的问题中没有提供 HTML。希望这仍然对您有所帮助。

function getLight() {
  var prefix = "background--";
  
  return $(".quote-block").hasClass("dark") ? (prefix + "dark") : 
         $(".quote-block").hasClass("light") ? (prefix + "light") : "";   							
}

$(".top-bar").addClass(getLight());

div {
  height: 2em;
}

.background--dark {
  background: black;
  border: 1px solid white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="top-bar"></div>
<div class="quote-block dark"></div>