показать / скрыть btns в зависимости от наличия пути href - PullRequest
Новая
       14

показать / скрыть btns в зависимости от наличия пути href

0 голосов
/ 30 сентября 2019

У меня есть файл json, похожий на этот ... 

[
  {
    "id": "01",
    "image": "_img/speakers/2019/Abigail L.jpg",
    "organization": "Mumsnet",
    "name": "Abigail Lebrecht",
    "para": "Stopwords personalisation and Text cleaning at Mumsnet",
    "slides": "#"
  },

  {
    "id": "02",
    "image": "_img/speakers/2019/Alexis Iglauer.jpg",
    "organization": "PartnerRe",
    "name": "Alexis Iglauer",
    "para" : "Medical underwriting triage: An end-to-end machine learning case study",
    "slides": "assets/slides/Thurs 12 Sept/Stream 3 session 3/Alexis Iglauer.pptx"
  },

  {
    "id": "03",
    "image": "_img/speakers/2019/Amanda Beedham.jpg",
    "organization": "RSA Insurance",
    "name": "Amanda Beedham",
    "para": "Harnessing AI to Create Insight from Text",
    "slides": "assets/slides/Weds 11 Sept/Stream 3 session 2/AmandaBeedham_RSA.pptx"
  }
]

файл на самом деле намного больше этого, но есть определенные идентификаторы, для которых значение ключа слайда установлено в #....

Я использую JavaScript для добавления группы HTML на веб-страницу, которая выглядит следующим образом: 

// get json file from directory
fetch("_img/speakers/speakers2019.json")
// store json data in res variable
.then(res => res.json())
// loop through json array and output mark up to target
// in index.html on line 447
.then(speakerArr => {

  var div = document.querySelector('.row_tile');
  for(var i = 0; i < speakerArr.length; i++) {
    div.innerHTML += `<div class="col-lg-3 col-xs-6">
    <div class="hover-element member member-2" data-title-position="center,center">
      <div class="hover-element__initial">
        <img src="${speakerArr[i].image}" />
      </div>
      <div class="hover-element__reveal fade-transiton" data-overlay="9">
        <div class="boxed">
          <h6>${speakerArr[i].organization}</h6>
          <h5>${speakerArr[i].name}</h5>
          <p class="small-text">${speakerArr[i].para}</p>
          <a class="modalbutton" href="${speakerArr.slides}" download>Slides</a>
        </div>
      </div>
    </div>
  </div>`;
  }
});

, но этот цикл проходит через json и отображает кнопку <a class="modalbutton" href="${speakerArr.slides}" download>Slides</a> для всех записей вJSON. У меня проблема в том, что не все кнопки имеют ссылку, на которую нужно направить ссылку;Как я могу изменить этот код так, чтобы он везде говорил «ключ / значение» # не отображать кнопку?

Я до сих пор пробовал это: 

  for(var i = 0; i < speakerArr.length; i++) {
    div.innerHTML += `<div class="col-lg-3 col-xs-6">
    <div class="hover-element member member-2" data-title-position="center,center">
      <div class="hover-element__initial">
        <img src="${speakerArr[i].image}" />
      </div>
      <div class="hover-element__reveal fade-transiton" data-overlay="9">
        <div class="boxed">
          <h6>${speakerArr[i].organization}</h6>
          <h5>${speakerArr[i].name}</h5>
          <p class="small-text">${speakerArr[i].para}</p>
          if(speakerArr[i].slides === "#"){
            <a class="modalbutton" href="${speakerArr[i].slides}" download>Slides</a>
          } else {
            <a class="modalbutton disabled" href="${speakerArr[i].slides}" download>Unavailable</a>
          }
        </div>
      </div
    </div>
  </div>`;
  }
});

Ноэто не работает должным образом, как мы можем получить if / else внутри ``?

В идеале я бы не хотел показывать кнопку везде, где ключ / значение в json равно #как это было бы возможно?

Ответы [ 3 ]

0 голосов
/ 30 сентября 2019

Я бы предложил добавить еще одну переменную с динамической кнопкой для добавления: 

var btn = ``;
for (var i = 0; i < speakerArr.length; i++) {

    if (speakerArr[i].slides === "#"){
        btn = `<a class="modalbutton" href="${speakerArr[i].slides}" download>Slides</a>`;
    } else {
        btn = `<a class="modalbutton disabled" href="${speakerArr[i].slides}" download>Unavailable</a>`;
    }

    div.innerHTML += `<div class="col-lg-3 col-xs-6">
    <div class="hover-element member member-2" data-title-position="center,center">
      <div class="hover-element__initial">
        <img src="${speakerArr[i].image}" />
      </div>
      <div class="hover-element__reveal fade-transiton" data-overlay="9">
        <div class="boxed">
          <h6>${speakerArr[i].organization}</h6>
          <h5>${speakerArr[i].name}</h5>
          <p class="small-text">${speakerArr[i].para}</p>
          ${btn}
        </div>
      </div>
    </div>
  </div>`;
}

Обновление: Также, расширяя ответ @ Bek, вот как вы можете использовать троичный оператор 

for (var i = 0; i < speakerArr.length; i++) {
    div.innerHTML += `<div class="col-lg-3 col-xs-6">
    <div class="hover-element member member-2" data-title-position="center,center">
      <div class="hover-element__initial">
        <img src="${speakerArr[i].image}" />
      </div>
      <div class="hover-element__reveal fade-transiton" data-overlay="9">
        <div class="boxed">
          <h6>${speakerArr[i].organization}</h6>
          <h5>${speakerArr[i].name}</h5>
          <p class="small-text">${speakerArr[i].para}</p>
          ${speakerArr[i].slides == '#' ? `<a class="modalbutton" href="${speakerArr[i].slides}" download>Slides</a>` : `<a class="modalbutton disabled" href="${speakerArr[i].slides}" download>Unavailable</a>`}
        </div>
      </div>
    </div>
  </div>`;
}
0 голосов
/ 30 сентября 2019

Попробуйте использовать троичный оператор так: 

`${speakerArr[i].slides == '#' ? '<a class="modalbutton" href="${speakerArr[i].slides}" download>Slides</a>' : '<a class="modalbutton disabled" href="${speakerArr[i].slides}" download>Unavailable</a>'}`
0 голосов
/ 30 сентября 2019

Это должно работать в вашем случае: 

 for(var i = 0; i < speakerArr.length; i++) {
    div.innerHTML += `<div class="col-lg-3 col-xs-6">
    <div class="hover-element member member-2" data-title-position="center,center">
      <div class="hover-element__initial">
        <img src="${speakerArr[i].image}" />
      </div>
      <div class="hover-element__reveal fade-transiton" data-overlay="9">
        <div class="boxed">
          <h6>${speakerArr[i].organization}</h6>
          <h5>${speakerArr[i].name}</h5>
          <p class="small-text">${speakerArr[i].para}</p>`;
          if(speakerArr[i].slides !== "#"){
            div.innerHTML += `<a class="modalbutton" href="${speakerArr[i].slides}" download>Slides</a>`;
          } 
        div.innerHTML += `</div>
      </div>
    </div>
  </div>`;
  }
...