根据 ui-icon-folder-open 和 Modal 替换 Image答案

【问题标题】：Replace Image based on ui-icon-folder-open and Modal根据 ui-icon-folder-open 和 Modal 替换 Image
【发布时间】：2015-01-26 02:19:59
【问题描述】：

我想在用户单击 ui-icon-folder-open 时替换图像。我从 Droppable UI http://jqueryui.com/droppable/#photo-manager 修改了代码并添加了一个模态窗口。如果我使用带有 data-toggle="modal" 的按钮并设置 data-target="#myModal" 则可以。但是，如果我尝试 $(#myModal).toggleClass("active") 之类的东西，则不会显示任何内容。非常感谢你。

Javascript

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" ></script>   
  <script>
        $( "ul.gallery > li" ).click(function( event ) {
          var $target = $( event.target );
          if ( $target.is( "a.ui-icon-folder-open" ) ) {
            //open modal
          }

          return false;
        });
  </script>

HTML

<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
  <li class="ui-widget-content ui-corner-tr">
    <img id="bg" src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72">
    <a href="#" title="Change another image" class="ui-icon ui-icon-folder-open">Change image</a>
    <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
  </li>
</ul>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Input Form</h4>
            </div>
            <div class="modal-body">
                Text Box 1 <input type="textbox" id="textbox1"> </input><br>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="saveTextBoxes()">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

【问题讨论】：

你试过 var $target = event.target;
我有代码$target = $(event.target)，但我不知道如何使用附加代码打开myModal。我对这些很陌生。提前谢谢你。
这是什么框架？有一个属性 aria-hidden="true" 如果您使用 chrome 将其设置为 false 是否显示
我正在使用 Chrome。这和框架有关吗？因为当我使用这些时可以打开模态框
我也使用这些脚本

标签： javascript jquery jquery-ui modal-dialog

【解决方案1】：

好的@joelgranas，我们得到了代码。非常感谢您的指导。

Javascript

    var $img_target = "";
    $("ul.gallery > li").click(function(event) {

        var $item = $(this),
            $target = $(event.target);

        $img_target = $target.parent().find('img');

        if ($target.is("a.ui-icon-folder-open")) {
            $('#myModal').modal('show');
        }

        return false;
    });

    $('#myModal').on('hidden.bs.modal',function(){
        $img_target.attr('src',$("#textbox1").val());
    });

HTML

<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
    <li class="ui-widget-content ui-corner-tr">
        <img id="bg1" src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72">
        <a href="#" title="Change another image" class="ui-icon ui-icon-folder-open">Change image</a>
        <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
    </li>
    <li class="ui-widget-content ui-corner-tr">
        <img id="bg2" src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72">
        <a href="#" title="Change another image" class="ui-icon ui-icon-folder-open">Change image</a>
        <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
    </li>           
</ul>

【讨论】：