jQuery-如何使用onClick事件同时更改图像和文本？

Question

我的目标是创建一个jQuery事件，当单击特定列表元素时，人员图像和信息都会相应更改。

我是jQuery的新手，想知道如何在两个单独的元素（img和p）的多个类之间切换，并具有正确的关联图像和文本，单击事件发生后更改（使用相同的jQuery效果）。

我设法使用下面的jQuery在单击时根据需要更改了图像的第四和第四位，但不知道如何将text / p /相应信息与之集成在一起。

JS

$(document).ready(function) {
  $("a").click(function(e) {
      e.preventDefault();
      var newClass = $(this).attr("id");
      var oldClass = $("#full-size-image").attr("class"):
          $("#full-size-image").fadeOut(function() {
              $("#full-size-image").removeClass(oldClass).addClass(newClass).fadeIn("slow");
          });
  });
});

这是我正在使用的HTML和CSS / SCSS，希望可以使上面的代码更清晰

的HTML

<div id="center-row" class="row">
    <nav class "column-4">
        <ul>
            <li><a href="#" id="bill">BILL</a></li>
            <li><a href="#" id="molly">MOLLY</a></li>
            <li><a href="#" id="anna">ANNA</a></li>
            <li><a href="#" id="sue">SUE</a></li>
        </ul>
    </nav>
    <section class="column-8">
        <div id="full-size-image" class="bill">
            &nbsp
        </div>
    </section>
</div>
<div class="row">
     <footer class=" column-12 ">
      <p id="text-box " class="bill-info ">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a tristique sapien, eget posuere dolor. Nulla quis leo vitae lorem luctus tempor. Cras vitae sem vel dui dapibus sagittis. Phasellus a odio finibus, ullamcorper dolor non, congue augue. Nullam vitae metus at velit efficitur placerat. Duis a pharetra velit, a faucibus ipsum. Ut malesuada ligula sed dui tempus, vel dapibus mi gravida.
      </p>
     </footer>
</div>

的CSS

section #full-size-image {
    background-size: 100%;
    border: 2px solid black;
}

section .bill {
    background: url('../images/bill.png') no-repeat;
}

section .molly {
    background: url('../images/molly.png') no-repeat;
}

section .anna {
    background: url('../images/anna.png') no-repeat;
}

section .sue {
    background: url('../images/sue.png') no-repeat;
}

Answer 1

您可以在脚本上或在单独的文件中将文本创建为JSON对象，并使用AJAX，为简单起见，我创建了在JS脚本中创建JSON对象的示例

看看这个JSFiddle

这将是您的JS：

// Globals 
var text = {
  'bill': "this is Bill's text",
  'molly': "this is Molly's text",
  'anna': "this is Anna's text",
  'sue': "this is Sue's text"
}

// You dont need to re-set this variable each time a click is done
// So we take it out of the click function
var fs = $("#full-size-image");
var tb = $("#text-box");

$(document).ready(function() {
  $("a").click(function(e) {
    e.preventDefault();
    var newClass = $(this).attr("id");
    var oldClass = fs.attr("class");

    // Change the image
    fs.fadeOut(function() {
      fs.removeClass(oldClass).addClass(newClass).fadeIn("slow");
    });

    // Change the text
    tb.fadeOut(function() {
      // Here, we search inside the text variable 
      // looking for a key matching the ID of the clicked <a>
      tb.text(text[newClass]).fadeIn('slow');
    });
  });
});

Answer 2

您可以点击a来设置p文本

$('#text-box').text($(this).text());

this指的是被点击的元素