javascript - 可点击元素应该隐藏/显示相关的轮播

我有 3 个可点击的元素。他们每个人都属于不同的轮播。因此，如果您单击其中一个，则只会显示相关的轮播。此外，点击的 div 应该有一个绿色边框。

我的代码存在以下问题:

所有 3 个 slider 都可见，但应该只显示一个(默认或单击)
可点击元素不起作用，但为什么呢？他们也没有得到绿色边框

  $("#marketing").click(function(){
		$("#webentwicklung1").hide();
		$("#design1").hide();
		$("#marketing1").show();
		$("#marketing.fachgebiete").addClass("active1")
		$("#webentwicklung.fachgebiete").removeClass("active1");
		$("#design.fachgebiete").removeClass("active1");
	});
	$("#design").click(function(){
		$("#webentwicklung1").hide();
		$("#marketing1").hide();
		$("#design1").show();
		$("#design.fachgebiete").addClass("active1")
		$("#webentwicklung.fachgebiete").removeClass("active1");
		$("#marketing.fachgebiete").removeClass("active1");
	});
	$("#webentwicklung").click(function(){
		$("#marketing1").hide();
		$("#design1").hide();
		$("#webentwicklung1").show();
		$("#webentwicklung.fachgebiete").addClass("active1")
		$("#marketing.fachgebiete").removeClass("active1");
		$("#design.fachgebiete").removeClass("active1");
	});
  
  
  
  
  $('#myCarousel').carousel({

    interval: 4000

	});



	// handles the carousel buttons

	$('[id^=carousel-selector-]').click( function(){

	  var id_selector = $(this).attr("id");

	  var id = id_selector.substr(id_selector.length -1);

	  id = parseInt(id);

	  $('#myCarousel').carousel(id);

	  $('[id^=carousel-selector-]').removeClass('selected');

	  $(this).addClass('selected');

	});



	// when the carousel slides, auto update

	$('#myCarousel').on('slide.bs.carousel', function (e) {

	  var id = $('.item.active').data('slide-number');

	  id = parseInt(id)+1;

	  $('[id^=carousel-selector-]').removeClass('selected');

	  $('[id=carousel-selector-'+id+']').addClass('selected');

	});

.active1{
  border:3px solid green;
}

<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>




<a href="#marketing1" id="marketing" >
	<div class="fachgebiete active1" style="margin:10px;width:20%;float:left;min-height: 50px;background:red;">
  </div>
 </a>
 
 <a href="#design1" id="design">
	<div class="fachgebiete" style="margin:10px;width:20%;float:left;min-height: 50px;background:yellow;">
  </div>
 </a>
 
 <a href="#webentwicklung1" id="webentwicklung">
	<div class="fachgebiete" style="margin:10px;width:20%;float:left;min-height: 50px;background:blue;">
  </div>
 </a>
 
 <br><br><br><br><br>

<div id="myCarousel marketing1" class="carousel slide" data-ride="carousel" style="min-height:50px;background:red;">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">abc</div>
    <div class="item">def</div>
    <div class="item">xyz</div>
  </div>
</div>


<div id="myCarousel design1" class="carousel slide" data-ride="carousel" style="min-height:50px;background:yellow;">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">hallo</div>
    <div class="item">tschüss</div>
    <div class="item">tag</div>
  </div>
</div>


<div id="myCarousel webentwicklung1" class="carousel slide" data-ride="carousel" style="min-height:50px;background:blue;">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">hier</div>
    <div class="item">jetzt</div>
    <div class="item">später</div>
  </div>
</div>

我做错了什么？非常感谢您的帮助!

最佳答案

这里有相当多的事情需要清理，但大部分归结为 HTML 上不正确的 id 值以及引用所述 id 值的不当尝试在你的 javascript 中。

我在下面提供了一个可用的 CodePen，但快速总结了导致它无法正常工作的根本原因(我还看到您编辑了您的问题并删除了重复的点击处理函数 - 这是一个好的开始! ).

id 不能有空格，但您的所有 3 个轮播都有 - 看起来您已经复制粘贴了一些标记并尝试添加第二个 ID...？无论哪种方式，简单地给每个轮播一个唯一的 id 是开始的关键。
您基于 jQuery 的点击处理程序失败，因为不存在具有您试图隐藏和显示的 id 值的此类元素(例如 marketing1、 design1 和 webentwicklung1)。请参阅上面的第 1 点。
应用绿色边框(通过 active1 类)失败，因为您的点击处理程序中的选择器不正确。如所写，这些选择器(例如 #marketing.fachgebiete、#design.fachgebiete 和 #webentwicklung.fachgebiete)匹配具有id(营销、设计或 webentwicklung)和一类 fachgebiete。相反，您想使用该类定位子元素，因此您需要在 id 选择器和类选择器之间留一个空格(例如 #marketing .fachgebiete、#design .fachgebiete , & #webentwicklung .fachgebiete).
此外，虽然不是阻塞问题，但由于重复使用 myCarousel 作为 ID，每个轮播中用于导航幻灯片的指示器(例如 carousel-indicators ) 没有正确映射到每个轮播。
同样不阻塞，你不需要轮播按钮的功能；您可以使用 data-target 和 data-slide-to 属性来开箱即用。

这里的工作示例: https://codepen.io/anon/pen/EEwyRa

我还清理了 CSS 并删除了内联样式(以减少样式规则的重复)。

关于javascript - 可点击元素应该隐藏/显示相关的轮播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49478794/

javascript - 可点击元素应该隐藏/显示相关的轮播

上一篇：javascript - event.shiftKey 在调试器中工作但不是全速

下一篇：javascript - 在 EaselJS 中将滤镜应用于动画 Sprite