时间戳

首页 > 解决方案 > javascript中HTML字符串与三元运算符的连接

javascript - javascript中HTML字符串与三元运算符的连接

问题描述

我正在尝试使用 + 运算符连接 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">

标签： javascripthtmlstring-concatenation

解决方案

+具有比条件运算符 (4)更高的运算符优先级(14)。您当前的代码相当于

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('');

推荐阅读