Замена содержимого DIV с помощью jQuery

-1

Я протащил сайт и изо всех сил пытаюсь найти надежный ответ на мой запрос ... В основном у меня есть эти элементы управления;Замена содержимого DIV с помощью jQuery

<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 на основе вашего выбора цвета. Так что скажите, что у меня есть ряд автомобилей и вы хотите, чтобы клиент выбрал цвет, я могу заставить мой скрипт работать один раз, но потом он снова не работает.

Любые идеи, было бы весьма признателен, так как я на самом деле изо всех сил:/

источник

2013-03-28 Takuhii

Его так как вам нужно использовать метод .on, чтобы реализовать его так, как вы пытаетесь сейчас. Но это даже не нужно. Вы должны создать несколько классов, которые вы можете добавить удалить в один div, а не заменять dom content каждый раз. – Rooster

Да, метод .on необходим для обработки событий, назначенных динамически вставленному контенту, однако, я думаю, вам может понравиться мой ответ ниже как лучшее решение в целом. – iGanja

Не изменяйте свой 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(); 
    })); 
});

источник

2013-03-28 17:01:05 iGanja

Мне нравится ответ iGanja, но все, что он сделал, это скрыть исходное изображение. Я думаю, что это способ претворить этот вопрос, я просто не вижу, что не так:/ – Takuhii

Привет @takuhii, я отредактировал ответ для вас и создал рабочую скрипку. http://jsfiddle.net/iGanja/vRRpa/1/ – iGanja

@takuhii Если это сработает для вас, не могли бы вы проголосовать и отметить как ответ. Это заняло у меня некоторое время; Благодарю. – iGanja

Причина, почему он не работает больше, чем в первый раз, что, хотя изменения класса, связывая это событие не происходит, так даже если класс обновлен до «.grey1», код jQuery не знает, чтобы его искать, потому что он не существовал, когда был вызван $ (document) .ready (когда ваша страница первоначально загружалась). В этом случае Livequery поможет в этом, динамически обновляя привязку событий.

Изменить

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

Для

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

источник

2013-03-28 16:59:53 exxodus7

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

Но я бы, вероятно, использовать атрибут данных или реорганизовать свои классы немного, так что я не зависел от substringing имя класса, чтобы удалить 1

источник

2013-03-28 17:00:21 NimChimpsky

Замена содержимого DIV с помощью jQuery

ответ

Смежные вопросы