使用 javascript/jQuery 在文本輸入中生成隨機數

Question

我正在嘗試在文本字段中生成一個隨機數。 不幸的是，ID 在這里不是一個選項，所以我使用類作為標識符。 我已經嘗試了很多東西，但似乎無法完成這項工作。

用於輸入的 HTML：

<div class="productAttributeRow productAttributeConfigurableEntryNumbersOnlyText">
    <div class="productAttributeLabel">
        <label>
            <span class="name">
                Hidden:   
            </span>
        </label>
    </div>
    <div class="productAttributeValue">
        <input type="text" class="Field validation" value="" size="5"  />
    </div>
</div>

我努力了：

var randomnumber = Math.floor(Math.random() * 11)
$('#BuyThis').click(function () {
    $(".productAttributeConfigurableEntryNumbersOnlyText.productAttributeValue input[type="
    text "]").val(randomnumber);
});

在上面的場景中， #BuyThis是一個按鈕：

<a id="BuyThis" type="button" class="btn btn-small btn-warning" href="#product-options" data-toggle="modal">

但是，這沒有必要通過單擊發生，我只需要在提交表單之前在字段中輸入一個隨機數。

也試過不點擊：

$(function(){
   var randomnumber=Math.floor(Math.random()*11)    
   $('.productAttributeConfigurableEntryNumbersOnlyText.productAttributeValue input[type="text"]').val( randomnumber );      

})

另一種嘗試：

function randomNumber(m, n) {
    m = parseInt(m);
    n = parseInt(n);
    randomnumber = Math.floor(Math.random() * (n - m + 1)) + m;
    ('.productAttributeConfigurableEntryNumbersOnlyText.productAttributeValue input[type="text"]').value = randomnumber;
});

嘗試了各種其他功能和組合都無濟於事。

Answer 1

具有productAttributeValue類的 div 位於productAttributeConfigurableEntryNumbersOnlyText ，因此在選擇時應在它們之間添加一個空格：

 $(function() { var randomnumber = Math.floor(Math.random() * 11) $('.productAttributeConfigurableEntryNumbersOnlyText .productAttributeValue input[type="text"]').val(randomnumber); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div class="productAttributeRow productAttributeConfigurableEntryNumbersOnlyText"> <div class="productAttributeLabel"> <label> <span class="name">Hidden:</span> </label> </div> <div class="productAttributeValue"> <input type="text" class="Field validation" value="" size="5" /> </div> </div>

工作： http : //jsfiddle.net/3hhCx/

Answer 2

$('.productAttributeConfigurableEntryNumbersOnlyText.productAttributeValue')

是選擇具有兩個元素.productAttributeConfigurableEntryNumbersOnlyText和.productAttributeValue 。

你要選擇具有一個元素.productAttributeValue這是一個孩子.productAttributeConfigurableEntryNumbersOnlyText 。

為此，請在它們之間添加一個空格：

$('.productAttributeConfigurableEntryNumbersOnlyText .productAttributeValue')

要插入隨機值，請使用：

var randomnumber=Math.floor(Math.random()*11)    
$('.productAttributeConfigurableEntryNumbersOnlyText .productAttributeValue input[type="text"]').val( randomnumber ); 

Answer 3

試試這個... HTML

<div class="productAttributeRow productAttributeConfigurableEntryNumbersOnlyText">
    <div class="productAttributeLabel">
        <label>
            <span class="name">
                Hidden:   
            </span>
        </label>
    </div>
    <div class="productAttributeValue">
        <input type="text" class="Field validation" value="" size="5"  />
    </div>

javascript:

var randomnumber=Math.floor(Math.random()*11)    

$('#BuyThis').click(function(){    
  $(".productAttributeConfigurableEntryNumbersOnlyText .productAttributeValue input:text").val( randomnumber ); 
});

嘗試演示