Question

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

我的代码存在以下问题：

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

＆＃13;

  $("#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');

	});

＆＃13;

.active1{
  border:3px solid green;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

There's quite a bit going on here that needs cleaning up, but most of it boils down to improper id values on your HTML and improper attempts at referencing said id values within your javascript.

I've provided a working CodePen below, but a quick summary of the root causes for this not working as you have it written (I also see you edited your question & removed the duplicate click handler functions - that's a good start!).

An id cannot have a space, but all 3 of your carousels do - it appears you've copy-pasted some markup and tried to add a second ID...? Either way, simply giving each carousel a unique id is the key to start.
Your jQuery-based click handlers are failing because there is no such item with the id values you're attempting to hide & show (e.g. marketing1, design1 and webentwicklung1). See point #1 above.
The applying of the green border (via active1 class) is failing because your selector within your click handlers is incorrect. As written, those selectors (e.g. #marketing.fachgebiete, #design.fachgebiete, & #webentwicklung.fachgebiete) are matching for an element with that id (marketing, design or webentwicklung) AND a class of fachgebiete. Instead you want to target the child element with that class, thus you need a space between the id selector and the class selector (e.g. #marketing .fachgebiete, #design .fachgebiete, & #webentwicklung .fachgebiete).
Also, while not a blocking issue, because of the duplicate use of myCarousel as an ID, the indicators to navigate the slides in each carousel (e.g. carousel-indicators) are not properly mapped to each carousel.
Also not blocking, you don't need the functions for the carousel buttons; you get those out of the box with the use of the data-target and data-slide-to attributes.

Working example here: https://codepen.io/anon/pen/EEwyRa

I also cleaned up the CSS & removed the inline styles (to reduce duplication of style rules).

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

1 个答案: