Выбранный вариант по клику

0

Привет, я новичок в JavaScript, Как я могу получить Fruit1 и Fruit2 после того, как я Fruit2 кнопку "Click me"

Например: если я нажму кнопку, а затем выберите 2 варианта из этой опции. если я должен выбрать Apple и Banana, тогда он должен предупредить "You choose Apple and Banana"

<html>
<head>
<script type="text/javascript">
function yourChoose() {
    alert("Now, let 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>
Теги:

4 ответа

2
Лучший ответ

Вот пример без 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 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>
Поделиться
  • 0
    приятно :) добавляю +1
1

Добавьте следующий 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/>
Поделиться
0

U может использовать это> http://fiddle.jshell.net/gUryq/3/

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

... jquery используется!

Поделиться
  • 0
    это работа в скрипке, но когда я копирую из скрипта, она не работает, что вы имеете в виду в использовании jquery?
  • 0
    Вы должны включить jquery в свой проект <script src = " code.jquery.com/jquery-1.11.0.min.js" ></ script >
Показать ещё 6 комментариев
0

Вот решение с 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);
});
Поделиться
  • 0
    не работает 4 меня ... из-за ссылок ...
  • 0
    Ссылки должны быть заменены флажками ...
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню