javascript - 基于ui-icon-folder-open和Modal替换图像

Question

我想在用户单击 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 -->

Answer 1

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

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>