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

【问题标题】：clickable elements should hide/show related carousels可点击的元素应该隐藏/显示相关的轮播
【发布时间】：2018-09-03 20:24:17
【问题描述】：

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

我的代码有以下问题：

所有 3 个滑块均可见，但应仅显示一个（默认或单击）
可点击元素不起作用，但为什么？他们也没有得到绿色边框

  $("#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>

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

【问题讨论】：

标签： javascript jquery css twitter-bootstrap carousel

【解决方案1】：

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

我在下面提供了一个有效的 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 并删除了内联样式（以减少样式规则的重复）。

【讨论】：

非常感谢您展示问题，帮了很多忙:-)