使用OnClick進行JavaScript函數調用

我有一個簡單的函數，它在硬編碼時工作，但是當我嘗試將第二個參數傳遞給它時，它不起作用。我使用onclick調用該函數並使用id => thumbnail來獲取該值。有什麼建議麼？使用OnClick進行JavaScript函數調用

硬編碼實例（工程）

<script> 
    function clearFileInputField(tagId) { 
    document.getElementById(tagId).innerHTML = document.getElementById(tagId).innerHTML; 
    $('.thumbnail').val(""); 
    } 
</script> 

<div id="thumbnail_div" class="row"> 
    <?php echo $form->labelex($model,'thumbnail'); ?> 
    <?php echo $form->textfield($model,'thumbnail', array(placeholder => "No file chosen", readonly => true, 'class' => 'thumbnail')); ?><br> 
    <?php echo $form->filefield($model,'thumbnail'); ?> 
    <?php echo $form->error($model,'thumbnail'); ?> 

    <input type="checkbox" onclick = "clearFileInputField('thumbnail_div')" href="javascript:noAction();"> Remove Thumbnail 
</div>

參數傳遞（不工作）

<script> 
    function clearFileInputField(tagId, div) { 
     document.getElementById(tagId).innerHTML = document.getElementById(tagId).innerHTML; 
     $('.div').val(""); 
    } 
    </script> 

    <div id="thumbnail_div" class="row"> 
     <?php echo $form->labelex($model,'thumbnail'); ?> 
     <?php echo $form->textfield($model,'thumbnail', array(placeholder => "No file chosen", readonly => true, 'id' => 'thumbnail')); ?><br> 
     <?php echo $form->filefield($model,'thumbnail'); ?> 
     <?php echo $form->error($model,'thumbnail'); ?> 

     <input type="checkbox" onclick = "clearFileInputField('thumbnail_div', 'thumbnail')" href="javascript:noAction();"> Remove Thumbnail 
    </div>

來源

2015-05-07 ChaseHardin

不工作的意思？ – artm

硬編碼示例將清除正確的數據。而傳遞參數的代碼不會清除數據。 – ChaseHardin

你可以檢查控制檯日誌中是否有錯誤？....適用於我...檢查這個http://jsfiddle.net/ucj3mpdv/ –

你幾乎沒有。在你的代碼中，參數div被轉換爲字符串。取而代之的是，嘗試下面給出的代碼，

<script> 
     function clearFileInputField(tagId, div) { 
       document.getElementById(tagId).innerHTML = 
           document.getElementById(tagId).innerHTML; 
        $('.'+div).val("");   
       } 
     </script>

來源

2015-05-07 13:41:51

這個工程真棒，謝謝！ – ChaseHardin

@downvoter，我錯過了什麼？ –

-2

試試這個（與腳本放置標記下方）：

<div id="thumbnail_div" class="row"> 
    <?php echo $form->labelex($model,'thumbnail'); ?> 
    <?php echo $form->textfield($model,'thumbnail', array(placeholder => "No file chosen", readonly => true, 'id' => 'thumbnail')); ?><br> 
    <?php echo $form->filefield($model,'thumbnail'); ?> 
    <?php echo $form->error($model,'thumbnail'); ?> 

    <input type="checkbox" onclick = "clearFileInputField('thumbnail_div', 'thumbnail')" href="javascript:noAction();"> Remove Thumbnail 
</div> 

<script> 
     function clearFileInputField(tagId, div) { 
      document.getElementById(tagId).innerHTML = document.getElementById(tagId).innerHTML; 
      $('.'+div).val(""); 

     } 
</script>

來源

2015-05-07 13:41:59 maioman

$('.div').val("");

一部分接近，但不會因爲你可能工作有意。你不是應該有它的兩種方法之一，

$('.'+div).val("");

，或者

$(div).val("");

對於選項1，您使用期間的字符串，並與可變DIV的價值相連來

使用選項2，您需要更改傳遞的參數以在其之前包含一段時間。

來源

2015-05-07 13:43:30

$('.div').val(""); 
    ^^^^^^

這是一個字符串，而不是一個變量。你正試圖找到有class="div"的元素。

您需要使用包含點的字符串來連接變量：

$('.' + div).val("");

來源

2015-05-07 13:43:58 Quentin

您可以輕鬆地擺脫你的內嵌處理器的，只是創建一個簡單的事件處理程序。

jQuery(function(){ 
 
    // Bind a handler to any button with the class remove_thumbnail 
 
    $('.remove_thumbnail').change(function(){ 
 
    if (this.checked) {  
 
     $(this) 
 
     // go up to parent row 
 
     .parents('.row') 
 
     // find the thumbnail 
 
     .find('.thumbnail') 
 
     .val(""); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="thumbnail_div" class="row"> 
 
    <input type="text" class="thumbnail" value="foo"> 
 
    <input type="checkbox" class="remove_thumbnail"> Remove Thumbnail 
 
</div>

的優點在這裏是你分開的內容和行爲，並不會引入功能到全球範圍。

來源

2015-05-07 14:08:45 max

使用OnClick進行JavaScript函數調用

回答

相關問題