Question

我正在尝试基于Wordpress媒体管理器为我的CMS构建一个图像管理器.CMS正在Yii2中开发。

现在我可以上传和查看所有上传的图片。接下来我想要的是能够添加自定义按钮（上传徽标，上传标题等），这将允许用户以模态调用图像管理器。然后从图库中上传或选择图像，并将图像ID添加到hiddeninput字段（徽标，标题等）。但是我在完成这项工作时遇到了麻烦。

这是我到目前为止所做的：

我有两个输入字段，一个用于徽标，另一个用于图标

徽标隐藏输入：ID - ＆gt;站点logo_media_id

img预览：class - ＆gt; preview_site-logo_media_id

按钮：ID - ＆gt;徽标按钮，自定义属性input_id - ＆gt; site-logo_media_id，class-＆gt; showModalButton

        <?= $form->field($model, 'logo_media_id')->hiddenInput(['maxlength' => true]) ?>
        <img class="preview_site-logo_media_id" src="" alt="">
        <?= Html::button('logo', ['title' => 'Upload Logo', 'id' => 'logo-button', 'input_id' => 'site-logo_media_id', 'class' => 'showModalButton btn btn-success']); ?>

favicon hiddeninput：ID - ＆gt;站点favicon_media-ID

img预览：class - ＆gt; preview_site-favicon_media_id

按钮：ID - ＆gt; favicon按钮，自定义属性input_id - ＆gt; site-favicon_media_id，class-＆gt; showModalButton

        <?= $form->field($model, 'favicon_media_id')->hiddenInput(['maxlength' => true]) ?>
        <img class="preview_site-favicon_media_id" src="" alt="">
        <?= Html::button('favicon', ['title' => 'Upload Favicon', 'id' => 'favicon-button', 'input_id' => 'site-favicon_media_id', 'class' => 'showModalButton btn btn-success']); ?>

当按下其中一个按钮时，将调用模态，其中包含所有上传的图像和一个上传更多图像的选项。图库中的图片包含 li 标记，其中包含 gallery-item 类，其中包含图像的属性数据键 ID

的Javascript

show_file_manager();

function show_file_manager() {
  $('.showModalButton').click(function() {
    // opens modal
    var input_id = $(this).attr("input_id");
    var preview_class = "preview_" + $(this).attr("input_id");
    // input_id gets the hiddeninput id, preview class is meant to display the selected images.
    select_gallery_item(input_id, preview_class);
    //the input_id and preview_class are passed to the next function
  });
}

function select_gallery_item(input_id, preview_class) {
  $('.gallery-item').click(function() {
    // gallery-item is the class name of the li containting an image
    var file_id = $(this).attr('data-key');
    // file_id is the image id
    var src = $(this).children('img').attr('src');
    // src gets the value from the images src to use in the preview class
    console.log(file_id);
    if (file_id) {
      $("#add-to-input").click(function() {
        // this button passes the image id to the hiddeninput with the correct input id(site-logo_media-id, site-favicon_media-id) and the images src to the preview class(preview_site-logo_media-id, preview_site-favicon_media-id)
        $('#' + input_id).val(file_id);
        $("." + preview_class).attr("src", src);
      });
    }
  });
}

问题：

每当 .showModalButton 运行时，函数select_gallery_item （javascript）似乎会递增。按一次显示 console.log（file_id）一次，按两次显示 console.log（file_id）两次等等
如果按第二个按钮 .showModalButton ，图像 id 和 src 会添加到hiddeninputfields（site-favicon_media-） id，site-logo_media-id）

我希望我能够传达这个问题，任何帮助都会受到高度赞赏。我做错了什么？我怎样才能让它变得更好？提前谢谢。

Answer 1

第一个问题是由 select_gallery_item 函数引起的。每次单击模态按钮时，另一个单击事件都会绑定到 .gallery-item 元素以及 #add-to-input 元素

我猜你是想尝试将参数传递给点击事件？

如果是，请查看此问题Passing parameters to click() & bind() event in jquery?

我猜第二个问题是由同样的原因引起的。首先，您单击以选择图像作为徽标，并为#add-to-input绑定绑定，当您更改图标时，第一个绑定的点击事件也会更改src和id作为徽标。

因此，尝试分离嵌套的点击绑定。

图片上传管理器

1 个答案: