Question

我需要创建一个按钮。按钮必须与此类似：

当我点击它时，它必须改变：

我该怎么办？谢谢大家。我需要我必须使用jquery，但我不知道如何。

Answer 1

相同的：

＆＃13;

	var value = 0;
  $("#add_btn").on("click", function() {
 	  $("#add_btn").hide();
    $("#to_show").show();
    value++;
    $("#value").text(value);
  });
  
   $("#minus").on("click", function() {
    value--;
    $("#value").text(value);
  });
  
   $("#plus").on("click", function() {
    value++;
    $("#value").text(value);
  });

＆＃13;

#to_show {
  display: none;
}
button{
  background-color: red;
  border: none;
  width:40px;
  height: 40px;
  color: #fff;
  font-size: 15px;
}
#value{
  width: 40px;
  display: inline-block;
  text-align:center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button id="add_btn">Add</button>
<div id="to_show">
  <button id="minus">-</button>
  <div id="value"></div>
  <button id="plus">+</button>
</div>

＆＃13;

Answer 2

这是javascript中的一个例子。您可以使用 jQuery 。

<强> CSS

.centerButton{
    cursor:pointer;
    text-align:center;
}
.smallButton{
    width:20px;
    height:20px;
}

<强> HTML

   <div class="centerButton" style="background:#f00;width:50px;height:25px;" id="addButton" >Add</div>
<div style="display:none" id="addButtonExpanded">
        <div  class="centerButton smallButton" style="float:left;background:#f00;" id="minusNumber" >-</div>
        <div class="centerButton smallButton" style="float:left" id="number" >1</div>
        <div class="centerButton smallButton" style="float:left;background:#f00;" id="plusNumber">+</div>

</div>
<input name="numberOfClicksInput" type="hidden" id="numberOfClicksInput"></input>

<强> javascipt的

$(document).ready(function() {
var numberOfClicks=0;

$("#addButton").click(function() {
    $("#addButton").hide();
    $("#addButtonExpanded").show(); 
    numberOfClicks++;
    $("#numberOfClicksInput").val(numberOfClicks);
});

$("#minusNumber").click(function() {
    numberOfClicks--;
    $("#numberOfClicksInput").val(numberOfClicks);
    if(numberOfClicks==0){
        $("#addButton").show();
        $("#addButtonExpanded").hide();
    } else {
        $("#number").text(numberOfClicks);
    }
})

$("#plusNumber").click(function() {
    numberOfClicks++;
    $("#numberOfClicksInput").val(numberOfClicks);
    $("#number").text(numberOfClicks);
});
 })

＆＃13;

$( document ).ready(function() {
var numberOfClicks=0;
$(document).ready(function() {
$("#addButton").click(function(){
	$("#addButton").hide();
	$("#addButtonExpanded").show();	
	numberOfClicks++;
	$("#numberOfClicksInput").val(numberOfClicks);
});

$("#minusNumber").click(function(){
	numberOfClicks--;
	$("#numberOfClicksInput").val(numberOfClicks);
	if(numberOfClicks==0){
		$("#addButton").show();
		$("#addButtonExpanded").hide();
	}else{
		$("#number").text(numberOfClicks);
	}
})

$("#plusNumber").click(function(){
	numberOfClicks++;
	$("#numberOfClicksInput").val(numberOfClicks);
	$("#number").text(numberOfClicks);
})
});
  })

＆＃13;

.centerButton{
	cursor:pointer;
	text-align:center;
}
.smallButton{
	width:20px;
	height:20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<html>
<head>




<div class="centerButton" style="background:#f00;width:50px;height:25px;" id="addButton" >Add</div>
<div style="display:none" id="addButtonExpanded">
		<div  class="centerButton smallButton" style="float:left;background:#f00;" id="minusNumber" >-</div>
		<div class="centerButton smallButton" style="float:left" id="number" >1</div>
		<div class="centerButton smallButton" style="float:left;background:#f00;" id="plusNumber">+</div>
		
</div>
<input name="numberOfClicksInput" type="hidden" id="numberOfClicksInput"></input>

＆＃13;

Answer 3

这是一个使用Jquery和Css的工作示例。隐藏和显示用于更改DOM元素。

$(document).ready(function() {
  var count = 0;
  $("#op").hide();
  $("#btn").click(function() {
    $("#result").text(count);
    $("#btn").hide();
    $("#op").show();
  });
  $("#plus").click(function() {
    count++;
    $("#result").text(count);
  });
  $("#minus").click(function() {
    count--;
    $("#result").text(count);
  });
});

#btn, .operator{
  background-color:rgb(224,0,0);
  text-align:center;
  cursor:pointer;
  color:white;
}

#btn{
  width:50px;
  padding:5px;
}

.operator{
  width:20px;
}

#op{
  width:130px;
}
#op div{
  float:left;
  padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">click</div>
<div id="op"><div id="minus" class="operator">-</div><div id="result"></div><div id="plus" class="operator">+</div></div>

按钮效果OnClick Javascript

3 个答案: