我怎么能使用jQuery一个点击的元素中选择图像 Metal Roof Colors

Question

这是我的HTML。请注意，我有一个H3标签与图像

<h3 class="title" id="1">Metal Roof Colors <img src="/sites/default/files/arrow-white.png" class="title-img flip"></h3>

我有4个标题这样的，我需要在点击标题仅旋转图像。以下是我的jQuery，但它翻转所有4张图像。我无法弄清楚。

if($(window).innerWidth() <= 775) {
    $('.expand').addClass('hidden');
        $('.title').on('click', func);
            function func(e) {
                e.preventDefault();
                    $('.title-img').toggleClass('flip');
                    $(this).next('.expand').toggleClass('hidden');
            }
    }

Answer 1

你在哪里目前类选择所有匹配的元素：

$('.title-img')

过滤器，通过点击的元素：

$('.title-img', this)

或许是这样的：

$(this).find('.title-img')

Answer 2

这是我会怎么做：

if ($(window).innerWidth() <= 775) {
  $('.expand').addClass('hidden');
  $('.title').on('click', function(e) {
    e.preventDefault();
    $(this).find(".title-img").toggleClass('flip');
    $(this).next('.expand').toggleClass('hidden');
  });

}

Here is the JSFiddle demo