Question

我正在使用一个插件来确定div背景颜色的亮度并动态应用＆＃34; light＆＃34;或者＆＃34;黑暗＆＃34;上课。我试图抓住该类并将其应用于另一个div，以便根据返回的值设置它。

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

为了简化这一点，最好只返回类名并将其附加到＆＃34;背景 - ＆＃34; （即：＆＃34;背景 - ＆＃34;加上插件产生的＆＃34; dark＆＃34;类，产生.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>

仅限于添加类名

1 个答案: