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，然后隐藏并根据需要显示它们。

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

使用jQuery替换DIV内容

3 个答案: