Question

我想创建一个函数来识别正在点击playimg的哪个实例以及哪个弹出窗口淡入。我喜欢其中的5个并希望尽可能地压缩代码。
如何将其重写为一个函数？

$('#playimg2').click(function() {
    $('#popup2').fadeIn('fast', function() {
        // Animation complete.
    });
});

$('#playimg3').click(function() {
    $('#popup3').fadeIn('fast', function() {
        // Animation complete.
    });
});

$('#playimg4').click(function() {
    $('#popup4').fadeIn('fast', function() {
        // Animation complete.
    });
});

Answer 1

下面，我将演示如何触发所有目标元素上的click事件。

您还需要一些方法来获取字符串id的数字（即playimg2，playimg15，playimg232）。您可以通过/([a-z]+)([0-9]+)/之类的东西使用正则表达式捕获组。这个正则表达式应该基于id字符串的格式。

试试这个：

var splitRegex = /([a-z]+)([0-9]+)/;

$('#playimg2, #playimg3, #playimg4').click(function () {
    $('#popup' + this.id.match(splitRegex).pop()).fadeIn('fast', function () {
       // Animation complete. 
    });
});

您也可以考虑为id创建一个公共类。

$('.some-class').click(function () {
    $('#popup' + this.id.match(splitRegex).pop()).fadeIn('fast', function () {
       // Animation complete. 
    });
});

Answer 2

看到你所有的playimg id看起来都一样。您可以在以下示例中访问所有这些内容。然后你需要做的就是检索id的最后一个字符（数字）并将动画添加到相应的元素。

$('id^=playimg').click(function(){
  var _id = $(this).attr('id');
  $('#popup' + _id.subString(_id.length-1)).fadeIn('fast', function(){
    //do stuff
  });
});

Answer 3

那些弹出窗口后代（儿童）是#playimg的HTML元素吗？如果是，您可以使用类而不是像这样的ID来命名它：

<div class="playimg">
    <div class="popup"></div>
</div>

现在javascript：

$( '.playimg').click(function() {
    $(this).find('popup').fadeIn('fast', function() {
        // Animation complete
    });
});

Answer 4

你可以使用

$(document).ready(function(){
    $('[id*="playimg"]').on('click',function(){
        var thisNum = $(this).attr('id').match(/\d+/);
         $('#popup'+thisNum).fadeIn('fast', function() {
            // Animation complete.
        });
    });
});

JSFIDDLE

Answer 5

你可以通过简单地使用类并获取被点击元素的索引并使用它来影响它的伙伴元素来实现这一点：

＆＃13;

$('.playimg').click(function() {
    var cur = $('.playimg').index($(this));
    $('.popup').fadeOut('fast');
    $('.popup').eq(cur).fadeIn('fast', function() {
        // Animation complete.
    });
});

＆＃13;

.playimg{
  width: 100px;
  height:20px;
  
  }
.popup{
  width: 100px;
  height:100px;
  display:none;
  background-color:#ccc;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="playimg"> playimg 1</div><br>
<div class="popup">popup 1</div><br>
<div class="playimg"> playimg 2</div><br>
<div class="popup">popup 2</div><br>
<div class="playimg"> playimg 3</div><br>
<div class="popup">popup3</div><br>

＆＃13;

如何将两个或多个jquery函数与执行相同但具有不同名称的元素组合在一起

5 个答案: