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);
});

但是我可能会使用 data 属性或稍微重构我的类，所以我不依赖于对类名进行子字符串化来删除 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();
    }));
});