如果显示特定元素，则更改另一个元素的 css

Question

我有一个使用引导程序运行的滑块图像。我想根据正在显示的幻灯片更改另一个 div 的 CSS。

例如，如果幻灯片（类中的项目）被显示，我的另一个 div 的左边距为 50 像素，如果幻灯片 2 显示（活动），另一个潜水的左边距为 100 像素

我尝试了以下 jQuery 没有成功：

if (!$('.item.one').is(':visible')) {
    $(".result").css("margin-left", "50px");
};

如果有人有任何建议，那就太好了！提前致谢。

-- 编辑--

这里是我的 HTML：

<div class="carousel-inner" role="listbox">
    <div class="item one active">
        <img style="width:500px" src="assets/images/pattern/04.jpg">
    </div>
    <div class="item two">
        <img style="width:500px" src="assets/images/pattern/02.png">
    </div>
     <div class="item three">
         <img style="width:500px" src="assets/images/pattern/03.jpg">
    </div>
    <div class="item four">
        <img style="width:500px" src="assets/images/pattern/01.jpg">
    </div>
</div>
<div id="result" class="result">
    <img src="assets/images/silouhette.png" alt="Silhouette placeholder">
</div>

我通过以下来自 Poonan 的 Jquery 进行了更改：

if (!$('.item.one').is(':visible')) {
    $(".result").css("margin-left", "50px");
};
if (!$('.item.two').is(':visible')) {
    $(".result").css("margin-left", "150px");
};
if (!$('.item.three').is(':visible')) {
    $(".result").css("margin-left", "250px");
};
if (!$('.item.four').is(':visible')) {
    $(".result").css("margin-left", "350px");
};

这适用-但如果我更改为第一项-它会保留 Jquery 的第四项中的 css。 . ..无论如何，当我改变幻灯片时它会改变你认为吗？？？

-- Bootsrap 滑块设置--

http://getbootstrap.com/javascript/#carousel

$('.carousel').carousel({
    pause: true,
    interval: false
});

Answer 1

试试这个（滑动时的事件）：

$('.carousel').on('slid.bs.carousel', function() {
  if ($('.item.one.active').length > 0) {
    $(".result").css("margin-left", "50px");
  };
  if ($('.item.two.active').length > 0) {
    $(".result").css("margin-left", "150px");
  };
  if ($('.item.three.active').length > 0) {
    $(".result").css("margin-left", "250px");
  };
  if ($('.item.four.active').length > 0) {
    $(".result").css("margin-left", "350px");
  };
});

看到这个工作fiddle

Answer 2

而不是使用

if (!$('.item.one').is(':visible'))

使用

setTimeout(function() {
    if ($('.item.one').hasClass('active')){
        $(".result").css("margin-left", "50px");
    }
    if ($('.item.two').hasClass('active')){
        $(".result").css("margin-left", "50px");
    }
    if ($('.item.three').hasClass('active')){
        $(".result").css("margin-left", "50px");
    }
    if ($('.item.four').hasClass('active')){
        $(".result").css("margin-left", "50px");
    }
}, 5000); // 5000 is the default interval

Answer 3

查看此演示，希望它是您搜索的内容，如果您创建一个基本但有效的小提琴会更好。无论如何，您可以使用.hasClass("active") 来检查特定项目是否处于活动状态并相应地更改边距。

fixMargin();

function activate(){
	$('.item').removeClass('active');
 	var item = $('#selector').val()-1;
 	$('.item:eq("'+item+'")').addClass("active");  
	fixMargin();
}

function fixMargin(){
  if ($('.item.one').hasClass("active")) {
  $(".result").css("margin-left", "50px");
  };

  if ($('.item.two').hasClass("active")) {
  $(".result").css("margin-left", "150px");
  };


  if ($('.item.three').hasClass("active")) {
  $(".result").css("margin-left", "250px");
  };

  if ($('.item.four').hasClass("active")) {
    $(".result").css("margin-left", "350px");
   };
}

#selector{
  width:20px;
}
.one {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Make item<input id="selector" type="text" value='2'/>(type number 1-4) active <button onClick="activate()">now</button></br/>
<div class="carousel-inner" role="listbox">

<div class="item one active">
             <img style="width:500px" src="assets/images/pattern/04.jpg">

</div>
<div class="item two">
             <img style="width:500px" src="assets/images/pattern/02.png">

</div>

 <div class="item three">
             <img style="width:500px" src="assets/images/pattern/03.jpg">

</div>

 <div class="item four">
             <img style="width:500px" src="assets/images/pattern/01.jpg">

</div>

  </div>

    <div id="result" class="result">

        <img src="assets/images/silouhette.png" alt="Silhouette placeholder" 
       </div>