Question

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

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

我已经设法使用下面的jQuery将图像更改为第四和我想要点击的第四个，但不知道如何将文本/ 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

您可以点击p

设置a的文字

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

this指的是被点击的元素

jQuery - 如何更改BOTH图像＆amp;使用onClick事件的文字？

2 个答案: