Jquery Toggle 如果 .text() 等于 img[title] 则更改图像

Question

在上周社区的帮助下，我成功实现了这个 代码在这里

现在我需要做类似的事情，但现在将 html 文本与 [title] 进行比较。到目前为止，我的代码如下：

$(document).ready(function() {

 $(".views-field-field-success-stories-image-data .field-content").click(function() {
   var sharedata = $(this).text();
   $('#bannerContainer img[title = "'+sharedata+'" ]').addClass('selected');
 });
 $("#bannerContainer img").click(function() {
  if (
   $('#bannerContainer img').hasClass('selected', $('#bannerContainer img').removeClass('selected') ) );

 });
});


      <span class="field-content">The Grand Event Center</span>
      <span class="field-content">Choura Events Catering</span>
      <span class="field-content">El Dorado Park Golf Course</span>

<div id="bannerContainer">
 <img src="1.jpg" title="The Grand Event Center" class="selected">
 <img src="1.jpg" title="The Grand Event Center" class="selected"> 
 <img src="1.jpg" title="The Grand Event Center" class="selected">
</div>

<!--- My Goal
<div id="bannerContainer">
 <img src="1.jpg" title="The Grand Event Center" class="">
 <img src="1.jpg" title="The Grand Event Center" class=""> 
 <img src="1.jpg" title="The Grand Event Center" class="selected">
</div> ---->

由于某种原因，我无法将我的头围绕在toggleClass上。

目前，如果我单击任何一个跨度，“选定的”会粘住，并且当我单击任何其他跨度时不会离开。

我缺少什么？

提前致谢！

Answer 1

我通常通过在将类添加到当前元素（您刚刚选择的元素）之前从所有相关元素中删除该类来实现此目的。

$(document).ready(function() {
 $(".views-field-field-success-stories-image-data .field-content").click(function() {

   // Add this next line
   $("#bannerContainer img").removeClass("selected");

   var sharedata = $(this).text();
   $('#bannerContainer img[title = "'+sharedata+'" ]').addClass('selected');
 });
 $("#bannerContainer img").click(function() {
  if (
   $('#bannerContainer img').hasClass('selected', $('#bannerContainer     img').removeClass('selected') ) );
 });
});

Answer 2

在一个元素上再次设置它之前，从所有拥有它的元素中删除“选定”类怎么样？