javascript - 使 div 可选择

Question

我试图创建两个可选择的 div。 div 应该表现得像按钮。我希望能够使用左右箭头选择其中一个 div。到目前为止，我能够使用这段代码实现这一点

document.addEventListener("keydown", keyDownDocument, false);

function keyDownDocument(e) {
var keyCode = e.keyCode;

  if(keyCode==37) {
  // left button
  $( ".left" ).addClass( "active_button" );
  $( ".right" ).removeClass( "active_button" );

  } else if(keyCode==39) {
	// right button
  $( ".right" ).addClass( "active_button" );
  $( ".left" ).removeClass( "active_button" );
  }
}

#wrapper {
	position: fixed;
	width:100%;
  height: 160px;
	background-color: gray;
	padding-left: 90px;
	padding-right: 90px;
}

 #wrapper:after {
	 content: "";
	 display: table;
	 clear: both;
} 

#text {
	padding-top: 33px;
	padding-bottom: 33px;
	width: 65%;
	display: inline-block;
	height: 80px;
	line-height: 44px;
	float: left;
}
#buttons {
	padding-top: 45px;
	padding-bottom: 45px;
	display: inline-block;
	float: left;
}
.left {
	height: 70px; 
	width: 70px; 
	margin-right: 20px;
	background-color: white;
	display: inline-block;
	
}
.right {
	height: 70px; 
	width: 70px;
	background-color: white;
	display: inline-block;
}

.active_button {
	background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div id="wrapper">
	<div id="text">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
	</div>
	<div id="buttons">
		<div   class="left active_button" >not ok</div>
		<div   class="right">ok</div>
	</div>
</div>

现在我希望能够通过鼠标与按钮进行交互。我不确定如何进行。

Answer 1

你需要添加的是

$('#buttons div').click(function(){
     $('#buttons div').removeClass('active_button');  // clear active button
     $(this).addClass('active_button');               // set current button to active

});

从两个按钮切换 active_button。

$('#buttons div').click(function(){
     $('#buttons div').removeClass('active_button');
     $(this).addClass('active_button');
     
});

document.addEventListener("keydown", keyDownDocument, false);

function keyDownDocument(e) {
var keyCode = e.keyCode;

  if(keyCode==37) {
  // left button
  $( ".left" ).addClass( "active_button" );
  $( ".right" ).removeClass( "active_button" );

  } else if(keyCode==39) {
	// right button
  $( ".right" ).addClass( "active_button" );
  $( ".left" ).removeClass( "active_button" );
  }
}

#wrapper {
	position: fixed;
	width:100%;
  height: 160px;
	background-color: gray;
	padding-left: 90px;
	padding-right: 90px;
}

 #wrapper:after {
	 content: "";
	 display: table;
	 clear: both;
} 

#text {
	padding-top: 33px;
	padding-bottom: 33px;
	width: 65%;
	display: inline-block;
	height: 80px;
	line-height: 44px;
	float: left;
}
#buttons {
	padding-top: 45px;
	padding-bottom: 45px;
	display: inline-block;
	float: left;
}
.left {
	height: 70px; 
	width: 70px; 
	margin-right: 20px;
	background-color: white;
	display: inline-block;
	
}
.right {
	height: 70px; 
	width: 70px;
	background-color: white;
	display: inline-block;
}

.active_button {
	background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div id="wrapper">
	<div id="text">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
	</div>
	<div id="buttons">
		<div   class="left active_button" >not ok</div>
		<div   class="right">ok</div>
	</div>
</div>