Функция вызова JavaScript с OnClick

Question

У меня есть простая функция, которая работает, когда она жестко закодирована, но когда я пытаюсь передать в нее второй параметр, она не работает. Я вызываю функцию с onclick и используя id => thumbnail, чтобы получить значение. Какие-либо предложения?

Hard Coded Пример (работ)

<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> 

Answer 1

Вы почти там. В вашем коде аргумент div преобразуется в строку. Вместо этого, попробуйте код, указанный ниже,

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

Answer 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> 

Answer 3

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

Та часть близка, но не будет работать, как вы могли бы намеревались. Вы вместо этого должны быть его одним из двух способов,

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

или,

$(div).val(""); 

С опцией 1, вы используете строку для периода и конкатенации его со значением переменной DIV

С помощью опции 2 вам необходимо будет изменить переданный параметр, включив в него период до него.

Answer 4

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

Это строка, а не переменная. Вы пытаетесь найти элементы, которые имеют class="div".

Вам необходимо сцепить переменную со строкой, содержащей точку .:

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

Answer 5

Вы можете легко избавиться от встроенного обработчика и просто создать простой обработчик событий.

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>

Преимущества здесь является то, что вы разделяете содержание и поведение и не вводить функции в глобальную область видимости.