0
私は問題を解決できません... 15CM（p要素）をクリックしながらグラインダーのサイズを変更する方法（画像のみ）。通常のサイズは24CM（ハイライトされたクラス）です。正方形の色をクリックすると、グラインダの色が変わります（24CMグラインダの使用属性：data-img-kのみ）。私は15CMをクリックするとグラインダーのサイズも変更したいと思います。次に、データ属性がdata-img-k15の15cmグラインダーの画像を変更する必要があります。そして、それは誰かが他のサイズをクリックするまで、15cmグラインダーの色（写真）を変更するだけです。要素をクリックしながら画像を変更する方法。それは他のサイズではなく、あるサイズの写真を表示するだけでなければなりません。
$(document).ready(function() {
$('.product-color').click(function() {
var codek = $(this).data('code-k');
var namek = $(this).data('name-k');
var imgk = $(this).data('img-k');
$('#grinder-code-k').text(codek);
$('#grinder-name-k').text(namek);
$('#grinder-photo-k').attr('src', imgk);
});
});.grinder-wrapper {
color: #111;
display: flex;
justify-content: space-around;
}
.product-photo {
height: 600px;
}
/*Kolumna 1*/
.grinder-wrapper>div {
width: 33%;
margin-bottom: 4em;
background-color: #f8f8f8;
}
.grinder-wrapper h3 {
text-align: left;
padding: 0;
}
.grinder-wrapper>div:first-child {
background-color: #f4f4f4;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.model {
position: absolute;
left: 2em;
top: 1em;
z-index: 999;
}
/*Kolumna 2*/
.product-color-outer {
height: 300px;
position: relative;
}
.product-color-box {
display: flex;
margin-bottom: 1em;
}
.product-color-box p {
margin: 0;
}
.product-color {
width: 30px;
height: 30px;
cursor: pointer;
}
.product-box-up-and-down {
display: flex;
flex-direction: column;
padding: 0 0 0 3em;
}
.product-box-down {
height: 300px;
}
/*Kolumna 3*/
.product-info-outer {
height: 300px;
position: relative;
}
.product-box-up {
display: flex;
justify-content: flex-start;
}
.product-box-up p {
text-align: center;
}
#grinder-code>span,
#grinder-name>span {
color: #3476bd;
}
/*Border effect wewnątrz*/
.product-color-outer:after {
content: '';
height: 2px;
width: 90%;
background: #e9e9e9;
display: block;
position: absolute;
bottom: 0em;
right: 0;
}
.product-color-outer:before {
content: '';
height: 90%;
width: 2px;
background: #e9e9e9;
display: block;
position: absolute;
bottom: 0em;
right: 0;
}
.product-info-outer:after {
content: '';
height: 2px;
width: 90%;
background: #e9e9e9;
display: block;
position: absolute;
bottom: 0em;
left: -3em;
}
.product-box-down-line {
position: relative;
}
.product-box-down p {
font-weight: bold;
color: #3476bd;
padding-right: 2em;
}
.highlighted{
background-color: #f4f4f4;
padding: 0.5em 1em;
color: #888;
margin-right: 1em;
color: #111;
cursor: pointer;
}
.not-highlighted{
background-color: #f4f4f4;
padding: 0.5em 1em;
color: #cbcbcb;
margin-right: 1em;
cursor: pointer;
}
/*Kolory tradycyjne*/
.white{
background: #fff;
}
.black{
background: #000;
}
.cream{
background: #f4f2db;
}
.wenge{
background: #432214;
} <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper grinder-wrapper">
<!--First column-->
<div class="product-photo">
<h3 class="model">Model klasyczny</h3>
<img id="grinder-photo-k" src="http://blosiu.webd.pl/młynki/img/grinders/klasyczny/klasyczny11.png" alt="młynek do mielenia" width="350">
</div>
<!--Second column-->
<div class="product-box-up-and-down">
<div class="product-color-outer">
<h4>Kolory<span class="available">dostępne</span></h4>
<p>Tradycyjne</p>
<div class="product-color-box">
<p class="product-color white" data-code-k="W-PR-15-MM" data-name-k="młynek klasyczny, kolor biały, wysokość 24cm, mechanizm metalowy" data-img-k="http://blosiu.webd.pl/młynki/img/grinders/klasyczny/klasyczny1.png"
data-img-k15="http://blosiu.webd.pl/m%C5%82ynki/img/grinders/klasyczny15/klasyczny1.png">
</p>
<p class="product-color black" data-code-k="SW-PR-15-MM" data-name-k="młynek klasyczny, kolor czarny, wysokość 24cm, mechanizm metalowy" data-img-k="http://blosiu.webd.pl/młynki/img/grinders/klasyczny/klasyczny2.png"
data-img-k15="http://blosiu.webd.pl/m%C5%82ynki/img/grinders/klasyczny15/klasyczny2.png">
</p>
<p class="product-color cream" data-code-k="KS-PR-15-MM" data-name-k="młynek klasyczny, kolor kremowy, wysokość 24cm, mechanizm metalowy" data-img-k="http://blosiu.webd.pl/młynki/img/grinders/klasyczny/klasyczny3.png"
data-img-k15="http://blosiu.webd.pl/m%C5%82ynki/img/grinders/klasyczny15/klasyczny3.png">
</p>
<p class="product-color wenge" data-code-k="WG-PR-15-MM-3" data-name-k="młynek klasyczny, kolor wenge, wysokość 24cm, mechanizm metalowy" data-img-k="http://blosiu.webd.pl/młynki/img/grinders/klasyczny/klasyczny4.png"
data-img-k15="http://blosiu.webd.pl/m%C5%82ynki/img/grinders/klasyczny15/klasyczny4.png">
</p>
</div>
</div>
</div>
<!--Third columnt-->
<div class="product-box-up-and-down">
<div class="product-info-outer">
<h4>Wysokości<span class="available">dostępne</span></h4>
<div class="product-box-up">
<div>
<p class="not-highlighted klasyczny-15" data-k15="img/grinders/klasyczny15/klasyczny1.png">15<br> CM
</p>
</div>
<div>
<p class="not-highlighted">18<br> CM
</p>
</div>
<div>
<p class="highlighted">24<br> CM
</p>
</div>
<div>
<p class="not-highlighted">32<br> CM
</p>
</div>
</div>
</div>
<div class="product-box-down product-box-down-line">
<h4>Informacje</h4>
<p>Kod produktu: <span id="grinder-code-k">WG-PR-15-MM-3 </span></p>
<p>Nazwa produktu: <span id="grinder-name-k">młynek klasyczny, kolor wenge, wysokość 24cm, mechanizm metalowy</span></p>
</div>
</div>
<!--End of wrapper-->
</div>
あなたはマスターです！あなたにはたくさんのことがあります。私はいつかあなたにビールを買いたいと思っています:-) – Blosom