показать следующий элемент из массива по клику в JavaScript - PullRequest
Новая
       10

показать следующий элемент из массива по клику в JavaScript

0 голосов
/ 20 апреля 2020

Может ли кто-нибудь объяснить мне, как показывать элементы из массива?

Что я должен использовать для завершения этого маленького «Проекта отзывов».

На данный момент функция onclick работает, но не подходит: -работает после второго клика -показывает только 2 мнения из массива 

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<!--  I used AI generated faces from this website: https://www.thispersondoesnotexist.com/image  --> 
<body>
  <h3>CLIENT</h3>
    <h1>TESTIMONIALS</h1>
      <h5>Mercedes w124 coupe</h5>

        <div class="container" data-index="0">
          <div class="img" id="img"></div>
            <p class="name" id="names"></p>
            <p class="text" id="texts">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <i class='fas fa-quote-left' style='font-size:36px'></i>
            <button class="left"  onclick="next('left')"><i class='fas fa-angle-left'></i></button>
            <button class="right" onclick="next('right')"><i class='fas fa-angle-right'></i></button>
        </div>
</body>


var opinions = [
  { name: "Carol",
    text: "Roomy and hard wearing inside, solid build quality that disguises miles well, still has class especially in estate and coupe form",
    img:  "https://www.thispersondoesnotexist.com/image"
  },{ 
    name: "Alex",
    text: "Strong, reliable, comfortable, well-built, safe. Bigger, more modern car than W123.",
    img:  "https://www.thispersondoesnotexist.com/image"
  },{ 
    name: "Jordan",
    text: "Extremely good looking coupe and convertible, with nice pillarless side window arrangement,solid build quality that disguises miles well, good ones are still capable of turning heads",
    img:  "https://www.thispersondoesnotexist.com/image"
  }];

var element = document.getElementById("img");
var i = 0;
function next(direction) {
 if(direction === 'right'){
    element.style.backgroundImage  ="url('"+ opinions[i++].img +"')";
    document.getElementById("names").innerHTML = opinions[i].name;
    document.getElementById("texts").innerHTML =  opinions[i].text;
 } else {
    element.style.backgroundImage  ="url('"+ opinions[i--].img +"')";
    document.getElementById("names").innerHTML = opinions[i].name;
    document.getElementById("texts").innerHTML =  opinions[i].text;
    }
};

Ответы [ 3 ]

1 голос
/ 20 апреля 2020

Вы увеличиваете значение i перед проверкой, есть ли в массиве элемент.

А также, с этой строкой 

opinions[i++].img

вы получаете options[1].img на первый щелчок, потому что вы определили i, чтобы начать с 0.

Проверьте ниже: 

var opinions = [
  { name: "Carol",
    text: "Roomy and hard wearing inside, solid build quality that disguises miles well, still has class especially in estate and coupe form",
    img:  "https://www.thispersondoesnotexist.com/image"
  },{ 
    name: "Alex",
    text: "Strong, reliable, comfortable, well-built, safe. Bigger, more modern car than W123.",
    img:  "https://www.thispersondoesnotexist.com/image"
  },{ 
    name: "Jordan",
    text: "Extremely good looking coupe and convertible, with nice pillarless side window arrangement,solid build quality that disguises miles well, good ones are still capable of turning heads",
    img:  "https://www.thispersondoesnotexist.com/image"
  }];

var element = document.getElementById("img");
var i = -1; // start with negative value

function next(direction) {
  if(direction === 'right') {
    if(opinions[i+1]) {  // check if element exists before incrementing i
      i++;
      element.style.backgroundImage  ="url('"+ opinions[i].img +"')";
      document.getElementById("names").innerHTML = opinions[i].name;
      document.getElementById("texts").innerHTML =  opinions[i].text;
    }
  } else {
    if(opinions[i-1]) {
      i--;
      element.style.backgroundImage  ="url('"+ opinions[i].img +"')";
      document.getElementById("names").innerHTML = opinions[i].name;
      document.getElementById("texts").innerHTML =  opinions[i].text;
    }
  }
}
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<!--  I used AI generated faces from this website: https://www.thispersondoesnotexist.com/image  --> 

<h3>CLIENT</h3>
<h1>TESTIMONIALS</h1>
<h5>Mercedes w124 coupe</h5>

<div class="container" data-index="0">
  <div class="img" id="img"></div>
    <p class="name" id="names"></p>
    <p class="text" id="texts">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <i class='fas fa-quote-left' style='font-size:36px'></i>
    <button class="left"  onclick="next('left')"><i class='fas fa-angle-left'></i></button>
    <button class="right" onclick="next('right')"><i class='fas fa-angle-right'></i></button>
</div>
0 голосов
/ 20 апреля 2020

Я только что проверил, все отлично работает. В поведении «он показывает только два отзыва», возможно, это так, потому что при первой загрузке он автоматически не показывает первый отзыв, поэтому при нажатии правой кнопки мыши вы можете перейти только к двум последним, но если вы начнете нажимать влево в конечном итоге вы сможете добраться до первого.

Я изменил ваш код, чтобы автоматически показывать первый отзыв при загрузке страницы: 

	var i = -1;
	var opinions = [
	{ name: "Carol",
		text: "Roomy and hard wearing inside, solid build quality that disguises miles well, still has class especially in estate and coupe form",
		img:  "https://www.thispersondoesnotexist.com/image"
	},{ 
		name: "Alex",
		text: "Strong, reliable, comfortable, well-built, safe. Bigger, more modern car than W123.",
		img:  "https://www.thispersondoesnotexist.com/image"
	},{ 
		name: "Jordan",
		text: "Extremely good looking coupe and convertible, with nice pillarless side window arrangement,solid build quality that disguises miles well, good ones are still capable of turning heads",
		img:  "https://www.thispersondoesnotexist.com/image"
	}];

	function next(direction) {
	var element = document.getElementById("img");
	 if(direction === 'right'){
	 i++;
			if (element != undefined) element.style.backgroundImage  ="url('"+ opinions[i].img +"')";
			document.getElementById("names").innerHTML = opinions[i].name;
			document.getElementById("texts").innerHTML =  opinions[i].text;
	 } else {
	 i--;
			if (element != undefined) element.style.backgroundImage  ="url('"+ opinions[i].img +"')";
			document.getElementById("names").innerHTML = opinions[i].name;
			document.getElementById("texts").innerHTML =  opinions[i].text;
			}
	};

	(function() {
		next('right');	 
	})();
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<!--  I used AI generated faces from this website: https://www.thispersondoesnotexist.com/image  --> 
<body>
  <h3>CLIENT</h3>
    <h1>TESTIMONIALS</h1>
      <h5>Mercedes w124 coupe</h5>

        <div class="container" data-index="0">
          <div class="img" id="img"></div>
            <p class="name" id="names"></p>
            <p class="text" id="texts">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <i class='fas fa-quote-left' style='font-size:36px'></i>
            <button class="left"  onclick="next('left')"><i class='fas fa-angle-left'></i></button>
            <button class="right" onclick="next('right')"><i class='fas fa-angle-right'></i></button>
        </div>
</body>

Вы по-прежнему должны обрабатывать, когда массив пуст и при клике вне индекса.

РЕДАКТИРОВАТЬ: Небольшая корректировка для индекса i.

Надеюсь, это поможет.

0 голосов
/ 20 апреля 2020

Ваш счетчик немного не прав. Я также рекомендую сбросить счетчик при достижении конца: 

var opinions = [
  { name: "Carol",
    text: "Roomy and hard wearing inside, solid build quality that disguises miles well, still has class especially in estate and coupe form",
    img:  "https://www.thispersondoesnotexist.com/image"
  },{ 
    name: "Alex",
    text: "Strong, reliable, comfortable, well-built, safe. Bigger, more modern car than W123.",
    img:  "https://www.thispersondoesnotexist.com/image"
  },{ 
    name: "Jordan",
    text: "Extremely good looking coupe and convertible, with nice pillarless side window arrangement,solid build quality that disguises miles well, good ones are still capable of turning heads",
    img:  "https://www.thispersondoesnotexist.com/image"
  }];

var element = document.getElementById("img");
var i = -1;
function next(direction) {
 if(direction === 'right'){
    i = i < opinions.length - 1 ? i + 1 : 0
    element.style.backgroundImage  ="url('"+ opinions[i].img +"')";
    document.getElementById("names").innerHTML = opinions[i].name;
    document.getElementById("texts").innerHTML =  opinions[i].text;
 } else {
    i = i > 0 ? i - 1 : opinions.length - 1
    element.style.backgroundImage  ="url('"+ opinions[i].img +"')";
    document.getElementById("names").innerHTML = opinions[i].name;
    document.getElementById("texts").innerHTML =  opinions[i].text;
    }
};
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<h3>CLIENT</h3>
    <h1>TESTIMONIALS</h1>
      <h5>Mercedes w124 coupe</h5>

        <div class="container" data-index="0">
          <div class="img" id="img"></div>
            <p class="name" id="names"></p>
            <p class="text" id="texts">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <i class='fas fa-quote-left' style='font-size:36px'></i>
            <button class="left"  onclick="next('left')"><i class='fas fa-angle-left'></i>prev</button>
            <button class="right" onclick="next('right')"><i class='fas fa-angle-right'></i>next</button>
        </div>
...