單擊時更改按鈕的值

Question

我有一列我想在框中顯示的笑話。當頁面被加載時，我想在框中隨機顯示一個。然後，當我點擊框時，我希望它再次將值更改爲列表中的另一個隨機值。

目前我只是無法讓它工作，不能解決我出錯的地方。我有HTML如下：

<input class="box" type="button" value"" /> 
<ul> 
    <li>How much do pirates pay to get their ear pierced? &lt;/br&gt; A buck anear!</li> 
    <li>How do pirates talk to one another? &lt;/br&gt; Aye to aye!</li> 
    <li>What did the sea say to the pirate captain? &lt;/br&gt; Nothing, it justwaved!</li> 
    <li>What is a pirates favourite shop? &lt;/br&gt; Ar-gos!</li> 
    <li>When is it the best time for a pirate to buy a ship? &lt;/br&gt; Whenit is on sail!</li> 
</ul> 

的腳本是：

$(document).ready(function() { 

    var list = $("ul li").toArray(); 
    var elemlength = list.length; 
    var randomnum = Math.floor(Math.random() * elemlength); 
    var randomitem = list[randomnum]; 

    $('.box').click(function() { 
     $(this).val(randomitem); 
    }); 
}); 

可有人請告訴我如何使按鈕有一個值時，頁面加載，然後更改值時按鈕被點擊。

小提琴：http://jsfiddle.net/uRd6N/98/

Answer 1

那麼你有兩個問題。

第一個是你總是選擇相同的笑話（在頁面加載時確定）。第二個是你將整個li元素添加到按鈕的值。

試試這個：

$(document).ready(function() { 
    var list = $("ul li").toArray(); 
    var elemlength = list.length; 

    $('.box').click(function() { 
     // get a new joke every time a button is clicked 
     var randomnum = Math.floor(Math.random() * elemlength); 
     var randomitem = list[randomnum].innerHTML; // use the HTML of the <li> 
     $(this).val(randomitem); 
    }); 
}); 

活生生的例子：http://jsfiddle.net/NxdEc/

Answer 2

你並不需要加載一個jQuery對象只是設置一個值。此外，您的randomitem需要明確地得到li元素

$(document).ready(function() { 

    var list = $("ul li").toArray(); 
    var elemlength = list.length; 
    var randomnum = Math.floor(Math.random() * elemlength); 
    var randomitem = list[randomnum].innerText; 

    $('.box').click(function() { 
     this.value = randomitem; 
    }); 
}); 

Answer 3

替代

$(this).val(randomitem); 

用的innerText：

$(this).val($(randomitem).text()); 

PS：甚至更好

$(document).ready(function() { 

    var list = $("ul li"); 
    var elemlength = list.length; 
    var randomnum = Math.floor(Math.random() * elemlength); 
    var randomitem = list.eq(randomnum); 

    $('.box').click(function() { 
     this.value = randomitem.text(); 
    }); 
}); 

個

PPS：如果你想使按鈕一個div你可以只是做人之道：

$(document).ready(function() { 

    var list = $("ul li"); 
    var elemlength = list.length; 
    var randomnum = Math.floor(Math.random() * elemlength); 
    var randomitem = list.eq(randomnum); 

    $('.box').click(function() { 
     $(this).html(randomitem.text()); 
    }); 
}) 

就一定要改變div的styiling，因爲它不會看起來相同的輸入。

Answer 4

你應該在你的代碼的一些變化：

• 生成隨機值每次單擊該按鈕。在你的代碼中，隨機值只生成一次。
• 單擊按鈕時，指定元素文本，而不是元素本身。
• 設置初始值。

函數中的隨機生成和賦值封裝在您的代碼中會很好。現在該代碼工作（可以在http://jsfiddle.net/uRd6N/99/運行）：

$(document).ready(function() { 
    var list = $("ul li").toArray(); 
    var elemlength = list.length; 

    // Encapsulate random value assignment within a function 
    var setRandomValue = function(element) { 
      var randomnum = Math.floor(Math.random() * elemlength); 
      var randomitem = list[randomnum]; 
      $(element).val($(randomitem).text()); 
    } 

    // Bind click button 
    $('.box').click(function() { 
     setRandomValue(this); 
    }); 

    // Set random value for the first time 
    setRandomValue($('.box')); 
}); 

Answer 5

試試這個小提琴（這是你的一個分支）：http://jsfiddle.net/darshanags/qHpkk/1/

HTML（更新）：

<input class="box" type="button" value="Value at page load" /> 

jQuery的：

$(document).ready(function() { 

    $('.box').click(function() { 

    var $items = $("ul li"), 
     list = $items.toArray(), 
     elemlength = list.length, 
     randomnum = Math.floor(Math.random() * elemlength); 

    $(this).val($items.eq(randomnum).text()); 
    }); 
});