Question

您好我是JavaScript的新手，点击按钮Fruit1

后如何获取Fruit2和"Click me"

例如：如果我单击按钮，则从选项中选择2个水果。如果我选择Apple和Banana，那么它应该提醒"You choose Apple and Banana"

<html>
<head>
<script type="text/javascript">
function yourChoose() {
    alert("Now, let's choose 2 fruit do you like ?");  

    // code for i choose 2 fruits
    var Fruit1 = .....;
    var Fruit2 = .....;
    alert("You choose "+Fruit1+" and "+Fruit2)
}

</script>
</head>
<body>
<button name="clickme" onclick="yourChoose()" >click me </button><br/>
<a href=""> Apple </a><br/>
<a href=""> Banana </a><br/>
<a href=""> Coconut </a><br/>
<a href=""> Durian </a><br/>
<a href=""> ElderBerry </a>
</body>
</html>

Answer 1

以下是没有jquery的示例，但使用OOP：）

<html>
<head>
<script type="text/javascript">
function Fruiter(){ // Class that manage your fruits
    this.addFruit = function(fr){ // adding fruits
        if (this.fr1) {
            this.fr2 = fr; 
            alert("You choose "+this.fr1+" and "+this.fr2); // show messages when all fruits choosed
        } else {this.fr1 = fr;}
    }
    this.chooseFruit = function(fr){ // choosing fruits / reseting
        this.fr1 = null;
        alert("Now, let's choose 2 fruit do you like ?");      
    }
}
var f = new Fruiter();

</script>
</head>
<body>
<button name="clickme" onclick="f.chooseFruit()" >click me </button><br/>
<a href="#" onclick="f.addFruit('Apple')"> Apple </a><br/>
<a href="#" onclick="f.addFruit('Banana')"> Banana </a><br/>
<a href="#" onclick="f.addFruit('Coconut')"> Coconut </a><br/>
<a href="#" onclick="f.addFruit('Durian')"> Durian </a><br/>
<a href="#" onclick="f.addFruit('ElderBerry')"> ElderBerry </a>
</body>
</html>

Answer 2

添加以下javascript：

var fruit1="";      //set the global variables
var fruit2="";

function selectFruit(name){
    fruit2=fruit1;  //this will set the global variables
    fruit1=name;    //at only 1 point of time 2 fruits are selected!
}

selectFruit函数将确保仅存储最新的2个点击水果

接下来，将您的链接更改为以下内容：

<a href="javascript:void(0)" onclick="selectFruit('Apple')"> Apple </a><br/>
<a href="javascript:void(0)" onclick="selectFruit('Banana')"> Banana </a><br/>
<a href="javascript:void(0)" onclick="selectFruit('Coconut')"> Coconut </a><br/>
<a href="javascript:void(0)" onclick="selectFruit('Durian')"> Durian </a><br/>
<a href="javascript:void(0)" onclick="selectFruit('ElderBerry')"> ElderBerry </a><br/>

Answer 3

以下是jQuery的解决方案：http://jsfiddle.net/guy777/8mJG5/

HTML：

<button id='btn' name="clickme">click me </button><br/>
<a href=""> Apple </a><br/>
<a href=""> Banana </a><br/>
<a href=""> Coconut </a><br/>
<a href=""> Durian </a><br/>
<a href=""> ElderBerry </a>

JavaScript：

$('#btn').on('click', function(e) {
    var a = $('a');
    var fruits = [];
    $.map(a, function(fruit) {
        fruits.push(fruit.text);
    });

    console.log(fruits);
});

Answer 4

你可以使用这个＆gt; http://fiddle.jshell.net/gUryq/3/

var fruits = { fruit1 : "", fruit2 : ""};
$("#clickme").click(function() {
    if(fruits.fruit1 == "" && fruits.fruit2 == "") {
        alert("Now, let's choose 2 fruit do you like ?");
    } else {
         alert("pls choose the other fruit first!");   
    }
});

...正在使用jquery！

通过onClick选择选项

4 个答案: