我一直在关注这个过去几天的问题，我不能为我的生活找到最好的方法。
我有5个圆圈（图像），里面有不同的文字。我需要做的是当点击其他4个圆圈中的一个时，我需要将其切换为单击的一个并替换文本...单击后需要成为中间圆等等。
这是我迄今为止所拥有的代码：https://codepen.io/anon/pen/yKZyVQ
有人可以帮助或指出我正确的方向吗？
HTML
<div class="new-circle-wrapers">
<div class="circles-arrow-left"></div>
<div class="circles-arrow-right"></div>
<div class="col-xs-12 mx-auto">
<img src="https://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/3/2012/08/23084428/c1_img2.png" class="img-fluid circle-images" data-size="small" data-img-large="https://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/3/2012/08/23084427/c1_img4.png"
data-img-medium="https://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/3/2012/08/23084427/c1_img4.png" data-img-small="https://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/3/2012/08/23084427/c1_img4.png" data-text="This is normally for the more experienced faster only. Water fasting has to be done carefully and
is not for everyone. A high degree of supervision is required for water fasting and our Doctor
and naturopathic health team will assess if this is suitable for you or not." />
<img src="https://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/3/2012/08/23084428/c1_img2.png" class="img-fluid circle-images" data-size="medium" data-img-large="https://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/3/2012/08/23084427/c1_img4.png"
data-img-medium="https://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/3/2012/08/23084427/c1_img4.png" data-img-small="https://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/3/2012/08/23084427/c1_img4.png" data-text="For newbie fasters having a juice supplemented with some fruits, like apple and pears, which are
high in fructose, can be a very gentle start. Often people starting on this move to vegetable
juicing after a few days." />
<img src="https://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/3/2012/08/23084428/c1_img2.png" class="img-fluid circle-images master-circle" data-size="large" data-img-large="https://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/3/2012/08/230844278/c1_img4.png"
data-img-medium="https://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/3/2012/08/23084427/c1_img4.png" data-img-small="https://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/3/2012/08/23084427/c1_img4.png" data-text="Drinking freshly made organic vegetable juices. This can just be green vegetables, such as cucumbers,
courgettes or spinach. Beetroot and carrots have a modicum of fructose (natural sugars). Although breaking
down these sugars adds a minimal load to the liver, these vegetables have high levels of beta-carotene
which offer exceptional health benefits to the mucus membranes in the eyes, lungs and gut." />
<img src="https://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/3/2012/08/23084428/c1_img2.png" class="img-fluid circle-images" data-size="medium" data-img-large="https://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/3/2012/08/23084427/c1_img4.png"
data-img-medium="https://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/3/2012/08/23084427/c1_img4.png" data-img-small="https://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/3/2012/08/23084427/c1_img4.png" data-text="There is another option we commonly recommend, which is a mixture of juices, smoothies and soups.
It’s all liquid but does include some fibre. This simple addition can really support someone for
whom who we think the slight stress of fasting could be detrimental. Often this is appropriate
for clients who have fatigue, where we’re trying to detox them and nourish them at the same time." />
<img src="https://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/3/2012/08/23084427/c1_img4.png" class="img-fluid circle-images" data-size="small" data-img-large="https://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/3/2012/08/23084427/c1_img4.png"
data-img-medium="https://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/3/2012/08/23084427/c1_img4.png" data-img-small="https://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/3/2012/08/23084427/c1_img4.png" data-text="Recently popularised by Dr Michael Mosley who introduced the 5:2 diet. Intermittent fasting is
juicing or reducing calories for 2 days per week. This is often a better option for people with
particular medical conditions or/and for newbie fasters." />
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-8 my-5 mx-auto text-center cirle-text">
Drinking freshly made organic vegetable juices. This can just be green vegetables, such as cucumbers, courgettes or spinach. Beetroot and carrots have a modicum of fructose (natural sugars). Although breaking down these sugars adds a minimal load to the
liver, these vegetables have high levels of beta-carotene which offer exceptional health benefits to the mucus membranes in the eyes, lungs and gut.
</div>
</div>
CSS
.slick-prev, .slick-next {
width: 70px !important;
height: 70px !important;
}
.slick-next {
right: -75px !important;
}
.circle-images {
margin-right: 10px;
}
.circle-images:last-child {
margin-right: 0px;
}
.new-circle-wrapers {
display: inherit;
width: 100%;
text-align: center;
position: relative;
}
.circle-text-hidden {
display: none;
}
/*.circles-arrow-left, .circles-arrow-right {
display: none;
}*/
/* Small phones portrait */
@media (max-width: 575.98px) {
.circle-images:nth-child(1), .circle-images:nth-child(2), .circle-images:nth-child(4), .circle-images:nth-child(5) {
display: none;
}
.circles-arrow-right {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
position: absolute;
right: 10px;
top: 90px;
border-left: 40px solid #636363;
}
.circles-arrow-left {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-right:40px solid #636363;
position: absolute;
left: 10px;
top: 90px;
}
}
的jQuery
$(document).ready(function() {
$(".circle-images").on("click", function() {
var currentText = $(".cirle-text").html();
var currentImage = $(".master-circle").attr("src");
$(".cirle-text").html($(this).data("text"));
$(".master-circle").attr("src", $(this).data("img-large"));
$(this).data("text", currentText);
$(this).data("img-large", currentImage);
});
});