JavaScript 使用 OnClick 调用函数

Question

我有一个简单的函数，它在硬编码时可以工作，但是当我尝试将第二个参数传递给它时，它不起作用。我正在使用 onclick 调用函数并使用 id => thumbnail 来获取值。有什么建议吗？

硬编码示例（有效）

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

这里的优点是您将内容和行为分开，并且不将函数引入全局范围。

JavaScript 使用 OnClick 调用函数

JavaScript Function Call With OnClick

html

javascript

onclick