Question

＆＃13;

var peopleArray = [
  {name: 'Abby Sepple', weirdThing: 'Abbey Road and pterodactyl hiccups' },
  {name: 'Alayna Buysse', weirdThing: 'Chucky cheese suit and heard that' },
  {name: 'Amy Venturino', weirdThing: 'No social media and 2 uvulas' },
  {name: 'Barbara King', weirdThing: 'Semi conductor expert and hates touching raw meat' },
  {name: 'Benjimin Lauderbaugh', weirdThing: 'minecraft and sleep walking' },
  {name: 'Charlie Garnaas', weirdThing: 'Morning ice-cream snacking and hates lines' },
  {name: 'Colin James Wymore', weirdThing: 'LOVEs conspiracy theories' },
  {name: 'Droo Hastings', weirdThing: 'Touring musician who craved normalcy' },
  {name: 'Amal Ali', weirdThing: 'Bust out dancing' },
  {name: 'Jim Vang', weirdThing: 'Puts stuff away and lab practical joker' },
  {name: 'Jorge Blue', weirdThing: 'Curious person and had a bit of tree branch in bicep for too long' },
  {name: 'Kara Bayse', weirdThing: 'Collects all the bags and will never eat white castle' },
  {name: 'Matt Larson', weirdThing: 'Experimental everything and collecting things for toy alter' },
  {name: 'Neota Moe', weirdThing: 'Loves watching surgeries, even her own and can talk about gross stuff over dinner' },
  {name: 'Ryan Beadie', weirdThing: 'Hockey hair mullet perm and seven of his favorite shirts' },
  {name: 'Sean Felling', weirdThing: 'Smiles when he is nervous and walks on the outside of his feet' },
  {name: 'Tiffany Love', weirdThing: 'Singing even when she does not realize it and Sunday morning breakfasts' },
  {name: 'Tessa M Ganser', weirdThing: 'Whale drone videos and big family' },
  {name: 'Zeinab Hassan', weirdThing: 'Sweet and savory and Nutella egg breakfasts' }
];




$(onReady);
var nameIndex = 0;
function onReady() {
    console.log('inside onReady');


    $('#nameDisplay').text('Name');
    $('#weirdDisplay').text('Weird');

    $('#nameChanger').on('click', nextName);

    $('#nameBack').on('click', prevName);






}//the end of onReady function

function nextName() {
    console.log('inside nextName');

    if (nameIndex == peopleArray.length) {
        console.log('I AM WHERE I NEED TO BE');
      nameIndex = 0;
    } else if (nameIndex == -1) {
      nameIndex = peopleArray.length - 1;
    }


    $('#nameDisplay').text(peopleArray[nameIndex].name);
    $('#weirdDisplay').text(peopleArray[nameIndex].weirdThing);
    $('#current').text(nameIndex + 1 + '/19');








    nameIndex++;
}

function prevName() {
    console.log('inside prevName');


    // $('.nameDisplay').attr('value', peopleArray[nameIndex].name);
    if (nameIndex == peopleArray.length) {
        console.log('I AM WHERE I NEED TO BE');
      nameIndex = 0;
  }
  else if (nameIndex == -1) {
      nameIndex = 19;

  }


    nameIndex = nameIndex -1;
    $('#current').text(nameIndex + '/19');
    $('#nameDisplay').text(peopleArray[nameIndex].name);
    $('#weirdDisplay').text(peopleArray[nameIndex].weirdThing);
    if (nameIndex ===  0) {
        console.log('I am where i need to be');
        nameIndex = 19;
        // console.log(nameIndex);
    }
    if (nameIndex === 0) {
        console.log('this');
        $('#current').text(1 + '/19');
    }



    console.log(nameIndex);
}

＆＃13;

.display {
    display: inline-block;
    margin:0;
    padding:0;
}

#nameDisplay {
    font-size: 1.5em;
}

#weirdDisplay {
    font-size: 1em;
}

.button {
    display: block;
    font-size: 1em;
    margin-top: 1em;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Weekend Challenge 1</title>
    <link rel="stylesheet" href="style.css" />
    <script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
  crossorigin="anonymous"></script>
    <script type="text/javascript" src="data.js"></script>
    <script type="text/javascript" src="client.js"></script>

  </head>
  <body>



    <div class="container">
        <p class = 'display' id = 'nameDisplay'></p>
        <p class="display">: </p>
        <p class = 'display' id = 'weirdDisplay'></p>
        <p id='current'>something</p>


        <button type="button" name="button" class ='button' id = 'nameChanger'>Next</button>
        <button type="button" name="button" class ='button' id = 'nameBack'>Prev</button>

    </div>
  </body>
</html>

＆＃13;

我如何将其淡化为下一个名称，我已经尝试过.fadeIn（），但这不起作用，是fadeToggle还是类似的东西？我不知道如何解决这个问题。此外，如果您发现任何其他错误，请告诉我

Answer 1

fadeIn和fadeOut无效，因为您使用的是jquery的瘦版本，它没有这些功能。你可以把

<script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>

而不是

<script
    src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
    crossorigin="anonymous"></script>

获得完整的jquery。

之后你可以像这样使用fadeIn和fadeOut：

$('#nameDisplay').fadeOut(function(){
    $(this).text(peopleArray[nameIndex].name).fadeIn();
});

在此示例中，#nameDisplay淡出，然后替换文本内部，然后#nameDisplay淡入。

我如何让它淡出到下一个名字

1 个答案: