jquery - jQuery を使用して DIV コンテンツを置き換える

Question

私はサイトをトロールしましたが、クエリに対する確かな答えを見つけるのに苦労しています... 基本的に私はこれらのコントロールを持っています。

<div id="prod1">
<div id="prod" class="green">
<div id="prodImg"><img src="images/prod_1_image.png" width="200" height="137" alt=""></div>
<div id="prodRating"><img src="images/prod_1_rating.png" width="200" height="14" alt=""></div>
<div id="prodInfo"><p>Brand/range name praesent eg odio arcu praesent eg odio arcu praesent eg odio arcu.</p></div>
<div id="prodPricing"><p>£99.99* <span class="was">was £229.99</span></p></div>
<div id="prodSaving"><p>Save over £150.00</p></div>
<div id="prodOffering"><p>+ Free delivery</p></div>
<div id="prodColour">
<div class="select"><a href="#" id="green"></a></div>
<div><a href="#" id="mauve" class="mauve1"></a></div>
<div><a href="#" id="brown" class="brown1"></a></div>
<div><a href="#" id="grey" class="grey1"></a></div>
<div><a href="#" id="white" class="white1"></a></div>
</div>
</div>
</div>

コントロールは、以下に概説するスクリプト全体で繰り返されます。

<script type="text/javascript">
$(document).ready(function() {
$(".green1").click(function(e){
e.preventDefault();
var content = $(this).html();
$('#prod1').html('<div id="prod" class="green"><div id="prodImg"><img src="images/prod_1_image.png" width="200" height="137" alt=""></div><div id="prodRating"><img src="images/prod_1_rating.png" width="200" height="14" alt=""></div><div id="prodInfo"><p>Brand/range name praesent eg odio arcu praesent eg odio arcu praesent eg odio arcu.</p></div><div id="prodPricing"><p>£99.99* <span class="was">was £229.99</span></p></div><div id="prodSaving"><p>Save over £150.00</p></div><div id="prodOffering"><p>+ Free delivery</p></div><div id="prodColour"><div class="select"><a href="#" id="green"></a></div><div><a href="#" id="mauve" class="mauve1"></a></div><div><a href="#" id="brown" class="brown1"></a></div><div><a href="#" id="grey" class="grey1"></a></div><div><a href="#" id="white" class="white1"></a></div></div><div id="prodCompare"><input name="Compare" type="checkbox" value="Compare"><p> Compare</p></div></div>');
});

$(".mauve1").click(function(e){
e.preventDefault();
var content = $(this).html();
$('#prod1').html('<div id="prod" class="mauve"><div id="prodImg"><img src="images/prod_2_image.png" width="200" height="137" alt=""></div><div id="prodRating"><img src="images/prod_1_rating.png" width="200" height="14" alt=""></div><div id="prodInfo"><p>Brand/range name praesent eg odio arcu praesent eg odio arcu praesent eg odio arcu.</p></div><div id="prodPricing"><p>£99.99* <span class="was">was £229.99</span></p></div><div id="prodSaving"><p>Save over £150.00</p></div><div id="prodOffering"><p>+ Free delivery</p></div><div id="prodColour"><div><a href="#" id="green" class="green1"></a></div><div class="select"><a href="#" id="mauve"></a></div><div><a href="#" id="brown" class="brown1"></a></div><div><a href="#" id="grey" class="grey1"></a></div><div><a href="#" id="white" class="white1"></a></div></div><div id="prodCompare"><input name="Compare" type="checkbox" value="Compare"><p> Compare</p></div></div>');
});

$(".brown1").click(function(e){
e.preventDefault();
var content = $(this).html();
$('#prod1').html('<div id="prod" class="brown"><div id="prodImg"><img src="images/prod_3_image.png" width="200" height="137" alt=""></div><div id="prodRating"><img src="images/prod_1_rating.png" width="200" height="14" alt=""></div><div id="prodInfo"><p>Brand/range name praesent eg odio arcu praesent eg odio arcu praesent eg odio arcu.</p></div><div id="prodPricing"><p>£99.99* <span class="was">was £229.99</span></p></div><div id="prodSaving"><p>Save over £150.00</p></div><div id="prodOffering"><p>+ Free delivery</p></div><div id="prodColour"><div><a href="#" id="green" class="green1"></a></div><div><a href="#" id="mauve" class="mauve1"></a></div><div class="select"><a href="#" id="brown"></a></div><div><a href="#" id="grey" class="grey1"></a></div><div><a href="#" id="white" class="white1"></a></div></div><div id="prodCompare"><input name="Compare" type="checkbox" value="Compare"><p> Compare</p></div></div>');
});

$(".grey1").click(function(e){
e.preventDefault();
var content = $(this).html();
$('#prod1').html('<div id="prod" class="grey"><div id="prodImg"><img src="images/prod_1_image.png" width="200" height="137" alt=""></div><div id="prodRating"><img src="images/prod_1_rating.png" width="200" height="14" alt=""></div><div id="prodInfo"><p>Brand/range name praesent eg odio arcu praesent eg odio arcu praesent eg odio arcu.</p></div><div id="prodPricing"><p>£99.99* <span class="was">was £229.99</span></p></div><div id="prodSaving"><p>Save over £150.00</p></div><div id="prodOffering"><p>+ Free delivery</p></div><div id="prodColour"><div><a href="#" id="green" class="green1"></a></div><div><a href="#" id="mauve" class="mauve1"></a></div><div><a href="#" id="brown" class="brown1"></a></div><div class="select"><a href="#" id="grey"></a></div><div><a href="#" id="white" class="white1"></a></div></div><div id="prodCompare"><input name="Compare" type="checkbox" value="Compare"><p> Compare</p></div></div>');
});

$(".white1").click(function(e){
e.preventDefault();
var content = $(this).html();
$('#prod1').html('<div id="prod" class="white"><div id="prodImg"><img src="images/prod_2_image.png" width="200" height="137" alt=""></div><div id="prodRating"><img src="images/prod_1_rating.png" width="200" height="14" alt=""></div><div id="prodInfo"><p>Brand/range name praesent eg odio arcu praesent eg odio arcu praesent eg odio arcu.</p></div><div id="prodPricing"><p>£99.99* <span class="was">was £229.99</span></p></div><div id="prodSaving"><p>Save over £150.00</p></div><div id="prodOffering"><p>+ Free delivery</p></div><div id="prodColour"><div><a href="#" id="green" class="green1"></a></div><div><a href="#" id="mauve" class="mauve1"></a></div><div><a href="#" id="brown" class="brown1"></a></div><div><a href="#" id="grey" class="grey1></a></div><div class="select"><a href="#" id="white"></a></div></div><div id="prodCompare"><input name="Compare" type="checkbox" value="Compare"><p> Compare</p></div></div>');
});
});
</script>

スクリプトのポイントは、選択した色に基づいて DIV を変更することです。たとえば、さまざまな種類の車があり、顧客に色を選んでもらいたいとします。スクリプトを一度機能させることはできますが、その後は機能しません。

私は本当に苦労しているので、どんなアイデアでも大歓迎です:/

Answer 1

最初よりも機能しない理由は、クラスは変更されますが、イベント バインディングは変更されないためです。したがって、クラスが ".grey1" に更新されても、jQuery コードはそれを探すことを認識しません。 $(document).ready が呼び出されたとき (ページが最初に読み込まれたとき) には存在しませんでした。この場合、イベント バインディングを動的に更新する Livequery が大いに役立ちます。

変化する

$(".grey1").click(function(e){
  // Stuff
});

に

$(".grey1").livequery(function() {
  $(this).click(function(e) {
    // Stuff
  });
});

Answer 2

$(".green1, .white1, .mauve1 /*etc*/ ").on("click", function(e){
  e.preventDefault();
  var newClass = $(this).getClass().substring(0, $(this).getClass().length-1);
  $('#prod').addClass(newclass);
});

しかし、おそらくデータ属性を使用するか、クラスを少しリファクタリングするので、クラス名の部分文字列化に依存せずに 1 を削除します

Answer 3

div を変更しないでください。すべてを作成してから、必要に応じて非表示にして表示してください。

<div id="products">
    <div id="prod1" class="prod green">
        <div id="prodImg"><img src="images/prod_1_image.png" width="200" height="137" alt=""></div>
        <div id="prodRating"><img src="images/prod_1_rating.png" width="200" height="14" alt=""></div>
            <div id="prodInfo"><p>This is Green</p><p>Brand/range name praesent eg odio arcu praesent eg odio arcu praesent eg odio arcu.</p></div>
        <div id="prodPricing"><p>£99.99* <span class="was">was £229.99</span></p></div>
        <div id="prodSaving"><p>Save over £150.00</p></div>
        <div id="prodOffering"><p>+ Free delivery</p></div>
    </div>
    <div id="prod2" class="prod mauve">
        <div id="prodImg"><img src="images/prod_2_image.png" width="200" height="137" alt=""></div>
        <div id="prodRating"><img src="images/prod_1_rating.png" width="200" height="14" alt=""></div>
            <div id="prodInfo"><p>This is Mauve</p><p>Brand/range name praesent eg odio arcu praesent eg odio arcu praesent eg odio arcu.</p></div>
        <div id="prodPricing"><p>£99.99* <span class="was">was £229.99</span></p></div><div id="prodSaving"><p>Save over £150.00</p></div>
        <div id="prodOffering"><p>+ Free delivery</p></div>
    </div>
    <div id="prod3" class="prod brown">
        <div id="prodImg"><img src="images/prod_2_image.png" width="200" height="137" alt=""></div>
        <div id="prodRating"><img src="images/prod_1_rating.png" width="200" height="14" alt=""></div>
            <div id="prodInfo"><p>This is Brown</p><p>Brand/range name praesent eg odio arcu praesent eg odio arcu praesent eg odio arcu.</p></div>
        <div id="prodPricing"><p>£99.99* <span class="was">was £229.99</span></p></div><div id="prodSaving"><p>Save over £150.00</p></div>
        <div id="prodOffering"><p>+ Free delivery</p></div>
    </div>
    <div id="prod4" class="prod grey">
        <div id="prodImg"><img src="images/prod_2_image.png" width="200" height="137" alt=""></div>
        <div id="prodRating"><img src="images/prod_1_rating.png" width="200" height="14" alt=""></div>
            <div id="prodInfo"><p>This is Grey</p><p>Brand/range name praesent eg odio arcu praesent eg odio arcu praesent eg odio arcu.</p></div>
        <div id="prodPricing"><p>£99.99* <span class="was">was £229.99</span></p></div><div id="prodSaving"><p>Save over £150.00</p></div>
        <div id="prodOffering"><p>+ Free delivery</p></div>
    </div>
    <div id="prod5" class="prod white">
        <div id="prodImg"><img src="images/prod_2_image.png" width="200" height="137" alt=""></div>
        <div id="prodRating"><img src="images/prod_1_rating.png" width="200" height="14" alt=""></div>
            <div id="prodInfo"><p>This is White</p><p>Brand/range name praesent eg odio arcu praesent eg odio arcu praesent eg odio arcu.</p></div>
        <div id="prodPricing"><p>£99.99* <span class="was">was £229.99</span></p></div><div id="prodSaving"><p>Save over £150.00</p></div>
        <div id="prodOffering"><p>+ Free delivery</p></div>
    </div>            
</div>
<div id="prodColour">
   <div class="select">
      <div><a href="#" id="green">Show Green</a></div>
      <div><a href="#" id="mauve" class="mauve">Show Mauve</a></div>
      <div><a href="#" id="brown" class="brown">Show Brown</a></div>
      <div><a href="#" id="grey" class="grey">Show Grey</a></div>
      <div><a href="#" id="white" class="white">Show White</a></div>
   </div>
</div>

$(document).ready(function() {
    $("#prod1").show();
    $("#prodColour .select").on("click", "a", (function(e){
       e.preventDefault();
       $(".prod").hide();
       $(".prod." + $(this).attr("id")).show();
    }));
});