Объединение строки HTML в javascript с троичным оператором - PullRequest
Новая
       19

Объединение строки HTML в javascript с троичным оператором

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

Я пытаюсь объединить строку HTML с помощью оператора +, и я использую троичный оператор, чтобы проверить условие и использовать соответствующее имя класса в элементе div, однако троичный оператор дает мне неправильный вывод. Я не знаю, что мне здесь не хватает. Кто-нибудь может объяснить, пожалуйста?

Мой код выглядит так: 

            fetch("./data/projects.json")
                .then(res => {
                    return res.json();
                })
                .then(jsonResponse => {
                    var carouselItem = ''

                    jsonResponse.data.map((image, index) => {
                        carouselItem += '<div class="carousel-item ' + index === 0 ? 'a' : 'b' + '">'
                    })

                    console.log(carouselItem);
                })
                .catch(err => {
                    console.log(err);
                })

Когда я запускаю этот код, я получаю следующий вывод 

b">b">b">b">b">

Я ожидаю, что вывод должен быть 

<div class="carousel-item a"><div class="carousel-item b"><div class="carousel-item b"><div class="carousel-item b"><div class="carousel-item b">

Ответы [ 3 ]

3 голосов
/ 10 апреля 2020

+ имеет более высокий приоритет оператора (14), чем условный оператор (4). Ваш текущий код эквивалентен 

carouselItem += ('<div class=carousel-item>' + index === 0) ? 'a' : 'b'

Мало того, что сравнение неверно, так и назначение. Измените на: 

carouselItem += '<div class="carousel-item ' + (index === 0 ? 'a' : 'b') + '"> </div>';

, чтобы условное сгруппировалось правильно. Вы также, вероятно, хотите закончить начатый <div. Кроме того, .map следует использовать только тогда, когда вы хотите создать новый массив. Если вам нужны только побочные эффекты, используйте forEach. 

jsonResponse.data.forEach((image, index) => {
  carouselItem += '<div class="carousel-item ' + (index === 0 ? 'a' : 'b') + '"> </div>';
});

Вы можете использовать .map здесь, если хотите, но если это так, верните <div>, который вы хотите , затем соедините это вместе: 

const carouselItem = jsonResponse.data.map((image, index) => (
  '<div class="carousel-item ' + (index === 0 ? 'a' : 'b') + '"> </div>'
))
  .join('');
2 голосов
/ 10 апреля 2020

Заключите троичную скобку в круглые скобки, чтобы сделать ее отдельным оператором и запретите + иметь приоритет (см. Ответ @ CertainPerformance) или используйте строку шаблона: 

const strA = "hello";
const strB = " world";
console.log(strA + 1 === 1 ? strB : "nope");
console.log(strA + (1 === 1 ? strB : "nope"));
console.log(`${strA}${1 === 1 ? strB : "nope"}`);
0 голосов
/ 10 апреля 2020

Проблема в том, что он не может правильно проанализировать.

замените 

carouselItem += '<div class=carousel-item>' + index === 0 ? 'a' : 'b'

скобками, как показано ниже 

carouselItem += '<div class=carousel-item>' + ((index === 0) ? 'a' : 'b')
...