另一种解决交换的方法

Question

我想问你们，有没有一种方法可以构建下面这样的函数，它不会使用id，也不需要任何数据库连接。我为什么要问？我想做一个函数，它可以在每个想要的子页面上调用，并且总是对任何类型的文本或图像做同样的事情(但img的数量可能不同，例如，在第1子页面上，我有5个唇膏，在第2子页面上我有10个唇膏)，具有相同的类名(或者不同的方式，不知道是否有)。目前，我必须为每个子页面创建新的函数并替换id，所以我将有一个非常长的脚本，其中包含相乘的相同函数。

var c1 = $('#c1'),
c2 = $('#c2'),
img1 = $('#c1p1'),
img2 = $('#c2p2'),
active = $('.active-li-img'),
allImages = $('.cp-img'),
allColors = $('.cp-img-color');
img1.click(function (e) {
allImages.fadeOut(0);
e.preventDefault();
allColors.removeClass("active-li-img");
$(this).addClass("active-li-img");
c1.fadeIn(0);
});
img2.click(function (e) {
allImages.fadeOut(0);
e.preventDefault();
allColors.removeClass("active-li-img");
$(this).addClass("active-li-img");
c2.fadeIn(0);
});

工作CodePen:

http://codepen.io/Nikolaus91/pen/3e23c318cf8915708fe1bf2696d88896

现在我的代码很长：

var c1 = $('#c1'), c2 = $('#c2'), c3 = $('#c3'), c4 = $('#c4'), c5 = $('#c5'), c6 = $('#c6'), c7 = $('#c7'), c8 = $('#c8'), c9 = $('#c9'), c10 = $('#c10'),
img1 = $('#c1p1'), img2 = $('#c2p2'), img3 = $('#c3p3'), img4 = $('#c4p4'),img5 = $('#c5p5'),img6 = $('#c6p6'),img7 = $('#c7p7'),img8 = $('#c8p8'),img9 = $('#c9p9'),img10 = $('#c10p10'),
active = $('.active-li-img'),
allImages = $('.cp-img'),
allColors = $('.cp-img-color');
img1.click(function (e) {
allImages.fadeOut(0);
e.preventDefault();
allColors.removeClass("active-li-img");
$(this).addClass("active-li-img");
c1.fadeIn(0);
});
img2.click(function (e) {
allImages.fadeOut(0);
e.preventDefault();
allColors.removeClass("active-li-img");
$(this).addClass("active-li-img");
c2.fadeIn(0);
});
img3.click(function (e) {
allImages.fadeOut(0);
e.preventDefault();
allColors.removeClass("active-li-img");
$(this).addClass("active-li-img");
c3.fadeIn(0);
});
img4.click(function (e) {
allImages.fadeOut(0);
e.preventDefault();
allColors.removeClass("active-li-img");
$(this).addClass("active-li-img");
c4.fadeIn(0);
});
img5.click(function (e) {
allImages.fadeOut(0);
e.preventDefault();
allColors.removeClass("active-li-img");
$(this).addClass("active-li-img");
c5.fadeIn(0);
});
img6.click(function (e) {
allImages.fadeOut(0);
e.preventDefault();
allColors.removeClass("active-li-img");
$(this).addClass("active-li-img");
c6.fadeIn(0);
});
img7.click(function (e) {
allImages.fadeOut(0);
e.preventDefault();
allColors.removeClass("active-li-img");
$(this).addClass("active-li-img");
c7.fadeIn(0);
});
img8.click(function (e) {
allImages.fadeOut(0);
e.preventDefault();
allColors.removeClass("active-li-img");
$(this).addClass("active-li-img");
c8.fadeIn(0);
});
img9.click(function (e) {
allImages.fadeOut(0);
e.preventDefault();
allColors.removeClass("active-li-img");
$(this).addClass("active-li-img");
c9.fadeIn(0);
});
img10.click(function (e) {
allImages.fadeOut(0);
e.preventDefault();
allColors.removeClass("active-li-img");
$(this).addClass("active-li-img");
c10.fadeIn(0);
});

Answer 1

我会更改它，这样每当你点击一个彩色的"瓷砖"时就会调用该函数：

allColors.click(function (e) {
allImages.fadeOut(0);
e.preventDefault();
allColors.removeClass("active-li-img");
$(this).addClass("active-li-img");
$('some selector').fadeIn(0);
});

唯一的问题是，类cp-img在img元素上，而它可能在a上更好，或者您可以简单地向a添加另一个类，并在上面的函数中使用该选择器。

只要标记一致，您甚至可以使用$('div.one-half ul li a')作为选择器。

唯一棘手的部分是如何找到需要淡入的图像，要做到这一点，最简单的方法是执行以下操作：

var tile_id = $(this).attr('id');
// remove 'p1' from tile id to get image id
var lipstick = tile_id.replace('p1', '');
$('#' + lipstick).fadeIn(0);

同样，只要id匹配，这就应该有效，所以整个过程就是：

allColors.click(function (e) {
allImages.fadeOut(0);
e.preventDefault();
allColors.removeClass("active-li-img");
$(this).addClass("active-li-img");
var tile_id = $(this).attr('id');
// remove 'p1' from tile id to get image id
var lipstick = tile_id.replace('p1', '');
$('#' + lipstick).fadeIn(0);
});

这应该适用于所有页面，无论你想使用多少支唇膏。

编辑

刚刚注意到，您的示例中的第二个tile的id为c2p2，因此除非将其重命名为c2p1，否则上面的内容将不起作用，对于任何其他图像也是如此。

否则，您需要弄清楚如何使用您正在使用的首选命名方案从磁贴id中提取图像id，我不确定它是什么，所以我暂时不使用它。

另一种选择是使用data属性并为标记中的每个磁贴设置口红。

例如

...
<img id="c1p1" data-lipstick="c1" class="cp-img-color active-li-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217235/odcien_31.jpg">
...
<img id="c2p2" data-lipstick="c2" class="cp-img-color" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217235/odcien_32.jpg">
...

然后更改

var tile_id = $(this).attr('id');
// remove 'p1' from tile id to get image id
var lipstick = tile_id.replace('p1', '');

至

var lipstick = $(this).data('lipstick');
// or $(this).attr('data-lipstick');

https://api.jquery.com/data/