如何隐藏以前的数据?

时间:2015-07-29 01:44:39

标签: javascript jquery

我正在做一些Javascript和jquery的基本编程..请先运行代码段以查看输出。(无法发布图片:()

当我点击'saga'它附加了saga的信息..稍后,如果我点击persona它会在现有数据的下方附加persona。我希望它像这样 - 当我点击角色时,之前的数据将消失并替换为新的数据。

我的代码:

的Javascript



function myCar(carName, carPlate, carColor) {
    this.carName = carName;
    this.carPlate = carPlate;
    this.carColor = carColor;
};

var Saga = new myCar('Saga', 'BLM2222', 'blue'),
    Persona = new myCar('Persona', 'JKQ2390', 'red'),
    Wira = new myCar('Wira','GVB3450','violet');

myCar.prototype.details = function($div){
    $div.append('Car Name: ' + this.carName + '<br>' + 'Car Plate: ' + this.carPlate + '<br>' + 'Car Color:' + this.carColor + '<br>' + '<br>');
};

$(document).ready(function() {
    $('#cars').click(function(e) {
        var cars = $(e.target);

        switch(cars[0].id) {
            case 'sagabtn':
                Saga.details($('#bigdiv'));
                break;
            case 'sonabtn':
                Persona.details($('#bigdiv'));
                break;
            case 'wirabtn':
                Wira.details($('#bigdiv'));
                break;
        }
    });
});
&#13;
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Proton</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="stylesheet.css"/>-->
</head>
<body>
<h1>Proton Cars</h1>
<div id="cars">
    <button id="sagabtn">Saga</button>
    <br><br>
    <button id="sonabtn">Persona</button>
    <br><br>
    <button id="wirabtn">Wira</button>
    <br><br>
</div>
<div id="bigdiv"></div>
</body>
</html>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

您可以使用.html而不是.append.html将添加到DOM。 function myCar(carName, carPlate, carColor) { this.carName = carName; this.carPlate = carPlate; this.carColor = carColor; }; var Saga = new myCar('Saga', 'BLM2222', 'blue'), Persona = new myCar('Persona', 'JKQ2390', 'red'), Wira = new myCar('Wira','GVB3450','violet'); myCar.prototype.details = function($div){ $div.html('Car Name: ' + this.carName + '<br>' + 'Car Plate: ' + this.carPlate + '<br>' + 'Car Color:' + this.carColor + '<br>' + '<br>'); }; $(document).ready(function() { $('#cars').click(function(e) { var cars = $(e.target); switch(cars[0].id) { case 'sagabtn': Saga.details($('#bigdiv')); break; case 'sonabtn': Persona.details($('#bigdiv')); break; case 'wirabtn': Wira.details($('#bigdiv')); break; } }); });将替换html。

阅读以下文章:http://api.jquery.com/html/ http://api.jquery.com/append/

&#13;
&#13;
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Proton</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="stylesheet.css"/>-->
</head>
<body>
<h1>Proton Cars</h1>
<div id="cars">
    <button id="sagabtn">Saga</button>
    <br><br>
    <button id="sonabtn">Persona</button>
    <br><br>
    <button id="wirabtn">Wira</button>
    <br><br>
</div>
<div id="bigdiv"></div>
</body>
</html>
&#13;
RKDropdownAlert.title(title:NSString, message:NSString, ...)
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您可以使用constexpr std::array清除每个按钮