使用ajax時更新div

Question

我有代碼顯示兩行類型為image的彩色輸入。 單擊其中一個輸入時，將以陰影突出顯示該輸入，並刪除先前單擊的輸入上的陰影。 這個jsfiddle顯示它作為非ajax代碼工作。

但這需要使用ajax。 我已經設置了一個jsfiddle試圖顯示這個但它無法運行所以我可能沒有正確設置其中的ajax代碼。 但是ajax在這里工作。 在我的本地設置中，單擊的輸入被遮蔽，應該是，但先前單擊的輸入保持陰影。

我找到了一個帖子，說div需要更新，所以我添加了以下但是只是讓div消失了。

    $("#group_one").load(location.href + "#group_one");

這是完整的代碼。 有人可以幫幫忙嗎？

    <style>
      .imgStr {display:inline-block }
    .selected{ box-shadow:0px 12px 22px 1px #333;}
    div.shadow { border: 0px solid #3DA1D2; padding: 10px; }
    div.shadow:hover {
      -moz-box-shadow: 0 0 5px rgba(61,161,210,0.5);
      -webkit-box-shadow: 0 0 5px rgba(61,161,210,0.5);
      box-shadow: 0 0 15px rgba(61,161,210,0.5);
    }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div><img src="outside.img"></div>

    <form method="post" action="/echo/html/" ajax="true">
    <div class='container' id="group_one">
      <div class="imgStr shadow" style="background:red">
        <input id="red_1" class="imgInput selected" name="img_front_group" value="red" type="image" src="red.gif">
      </div>
      <div class="imgStr shadow" style="background:yellow">
        <input id="yellow_1" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif">
      </div>
      <div class="imgStr shadow" style="background:white">
        <input id="white_1" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif">
      </div>
    </div>

    <div class='container' id="group_two">
      <div class="imgStr shadow" style="background:red">
        <input id="red_2" class="imgInput selected" name="img_front_group" value="red" type="image" src="red.gif">
      </div>
      <div class="imgStr shadow" style="background:yellow">
        <input id="yellow_2" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif">
      </div>
      <div class="imgStr shadow" style="background:white">
        <input id="white_2" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif">
      </div>
      <div id="showid"></div>


    <script>
    var last_selected;

    $("input").click(function(){
      var current_selected = $(this).closest('.container').find(".selected");
      $("#showid").text('previous selected = '+current_selected.attr('id'));

      $(this).closest('.container').find(".selected").removeClass('selected');
      $(this).addClass("selected");
    });
    </script

Answer 1

我明白你對jsfiddle的看法，但我不知道怎么做。 我想，我終於找到了一個讓它運轉的例子。 這是更新的jsfiddle 。 出於某種原因，它只適用於FF和Chrome。 它已失去顯示所選項目的能力。 原始的jsfiddle和我的代碼在這方面工作得很好所以它是這個新的jsfiddle導致問題，但我不知道如何解決這個問題。

對於這個新的jsfiddle，我需要能夠點擊其中一個輸入並選擇它（通過它周圍的陰影顯示）。 然后，當單擊該行中的不同輸入時，陰影移動到它。 我希望這有助於看到問題。

    <style>
    .imgStr {display:inline-block }
    .selected{ box-shadow:0px 12px 22px 1px #333;}
    div.shadow { border: 0px solid #3DA1D2; padding: 10px; }
    div.shadow:hover {
      -moz-box-shadow: 0 0 5px rgba(61,161,210,0.5);
      -webkit-box-shadow: 0 0 5px rgba(61,161,210,0.5);
      box-shadow: 0 0 15px rgba(61,161,210,0.5);
    }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="showform"></div>
    <script> 

    function ShowForm () {
      $.ajax({
         url: 'ajax2.php',
         success: function(data) {

           $("#showform").html(`
             <div class="container" id="group_one">
               <div class="imgStr shadow" style="background:red">
                 <input id="red_1" class="imgInput selected" name="img_front_group" value="red" type="image" src="red.gif">
               </div>
               <div class="imgStr shadow" style="background:yellow">
                 <input id="yellow_1" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif">
               </div>
               <div class="imgStr shadow" style="background:white">
                 <input id="white_1" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif">
               </div>
             </div>

             <div class="container" id="group_two">
               <div class="imgStr shadow" style="background:red">
                 <input id="red_2" class="imgInput selected" name="img_front_group" value="red" type="image" src="red.gif">
               </div>
               <div class="imgStr shadow" style="background:yellow">
                 <input id="yellow_2" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif">
               </div>
               <div class="imgStr shadow" style="background:white">
                 <input id="white_2" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif">
               </div>
             <div id="showid"></div>         
            `);
          }
      });
    };

    $(document).ready(function() {
      ShowForm();

      $("input").click(function(){
        var current_selected = $(this).closest(".container").find(".selected");
        $("#showid").text("previous selected = "+current_selected.attr("id"));
        $(this).closest(".container").find(".selected").removeClass("selected");
        $(this).addClass("selected");  
      });    
    });
    </script>