ajaxを使用してdivを更新する

Question

イメージタイプの2色の入力を表示するコードがあります。入力の1つがクリックされると、それが影で強調表示され、以前にクリックされた入力の影が削除されます。このjsfiddleは非Ajaxコードとして動作しています。

しかし、これはajaxを使用して動作する必要があります。これを表示しようとしているjsfiddleをセットアップしましたが、実行に失敗するので、おそらく正しく設定された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では、入力の1つをクリックして選択する必要があります（周囲の影で表示）。その行の別の入力がクリックされると、影がその行に移動します。私はこれが問題を見るのに役立つことを願っています。

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