在嵌套 svelte 中切换 div 显示的问题 #each-block

Question

我只想通过单击标题展开相应的块。目前，当我点击一个标题时，它们都会同时工作。

如何在 svelte 中继续？

我尝试使用数据中的 header 作为 ID。但这没有用。

回复：https://svelte.dev/repl/8495aab06879495ab379949778dd29f4?version=3.9.1

<script>
  let angebote = {
    success: true,
    liste1: [
      {
        Ausbildungsberufe: "Abitur",
        Beschreibung:
          "Leistungskurs Deutsch, Englisch, Franz\u00f6sisch\nLeistungskurs Geschichte, Sozialwissenschaften, P\u00e4dagogik, Erdkunde\nLeistungskurs Mathematik, Biologie, Physik, Chemie",
        Firma: "Euregio-Gymnasium Gymnasium der Stadt Bocholt",
        Standnummer: "54",
        Bereich: "Obergeschoss",
        Bereichskuerzel: "OG",
        Bereichsfarbe: "#EC661C",
        tags:
          "Berufsvorbereitung,weiterf\u00fchrende Schule,Vorbereitung aufs Studium"
      },
      {
        Ausbildungsberufe: "Abitur",
        Beschreibung:
          "Leistungskurs Deutsch, Englisch, Franz\u00f6sisch\nLeistungskurs Geschichte, Sozialwissenschaften, P\u00e4dagogik, Erdkunde\nLeistungskurs Mathematik, Biologie, Physik, Chemie",
        Firma: "Gesamtschule der Stadt Bocholt mit gymnasialer Oberstufe",
        Standnummer: "52",
        Bereich: "Obergeschoss",
        Bereichskuerzel: "OG",
        Bereichsfarbe: "#EC661C",
        tags:
          "Berufsvorbereitung,weiterf\u00fchrende Schule,Vorbereitung aufs Studium"
      },
      {
        Ausbildungsberufe: "Allgemeine Hochschulreife",
        Beschreibung: "-",
        Firma: "Weiterbildungskolleg Westm\u00fcnsterland",
        Standnummer: "53",
        Bereich: "Obergeschoss",
        Bereichskuerzel: "OG",
        Bereichsfarbe: "#EC661C",
        tags:
          "Vorbereitung auf Beruf,weiterf\u00fchrende Schule,Vorbereitung aufs Studium"
      },
      {
        Ausbildungsberufe: "Altenpflegehelfer (m/w/d)",
        Beschreibung:
          "Altenpflegehelfer unterst\u00fctzen Altenpfleger bei der Betreuung, Versorgung und Pflege \u00e4lterer Menschen.",
        Firma: "Azurit Gruppe",
        Standnummer: "46",
        Bereich: "Au\u00dfenbereich",
        Bereichskuerzel: "AU",
        Bereichsfarbe: "#cc3f8b",
        tags: "Pflege,Sozial,Menschen,Senioren,F\u00fcrsorge,Medizin"
      },
      {
        Ausbildungsberufe: "Altenpflegehelfer (m/w/d)",
        Beschreibung:
          "Altenpflegehelfer unterst\u00fctzen Altenpfleger bei der Betreuung, Versorgung und Pflege \u00e4lterer Menschen.",
        Firma: "DRK Altenpflege Bocholt",
        Standnummer: "70",
        Bereich: "Obergeschoss",
        Bereichskuerzel: "OG",
        Bereichsfarbe: "#EC661C",
        tags: "Pflege,Sozial,Menschen,Senioren,F\u00fcrsorge,Medizin"
      },
      {
        Ausbildungsberufe: "Altenpflegehelfer (m/w/d)",
        Beschreibung:
          "Altenpflegehelfer unterst\u00fctzen Altenpfleger bei der Betreuung, Versorgung und Pflege \u00e4lterer Menschen.",
        Firma: "Caritas Bildungszentrum",
        Standnummer: "70",
        Bereich: "Obergeschoss",
        Bereichskuerzel: "OG",
        Bereichsfarbe: "#EC661C",
        tags: "Pflege,Sozial,Menschen,Senioren,F\u00fcrsorge,Medizin"
      },
      {
        Ausbildungsberufe: "Altenpflegehelfer (m/w/d)",
        Beschreibung:
          "Altenpflegehelfer unterst\u00fctzen Altenpfleger bei der Betreuung, Versorgung und Pflege \u00e4lterer Menschen.",
        Firma: "Guter Hirte",
        Standnummer: "70",
        Bereich: "Obergeschoss",
        Bereichskuerzel: "OG",
        Bereichsfarbe: "#EC661C",
        tags: "Pflege,Sozial,Menschen,Senioren,F\u00fcrsorge,Medizin"
      },
      {
        Ausbildungsberufe: "Altenpflegehelfer (m/w/d)",
        Beschreibung:
          "Altenpflegehelfer unterst\u00fctzen Altenpfleger bei der Betreuung, Versorgung und Pflege \u00e4lterer Menschen.",
        Firma: "Jeanette Wolff Seniorenzentrum",
        Standnummer: "70",
        Bereich: "Obergeschoss",
        Bereichskuerzel: "OG",
        Bereichsfarbe: "#EC661C",
        tags: "Pflege,Sozial,Menschen,Senioren,F\u00fcrsorge,Medizin"
      },
      {
        Ausbildungsberufe: "Altenpflegehelfer (m/w/d)",
        Beschreibung:
          "Altenpflegehelfer unterst\u00fctzen Altenpfleger bei der Betreuung, Versorgung und Pflege \u00e4lterer Menschen.",
        Firma: "Lebenshilfe Unterer Niederrhein",
        Standnummer: "75",
        Bereich: "Tiefgarage",
        Bereichskuerzel: "TG",
        Bereichsfarbe: "#74AF9B",
        tags: "Pflege,Sozial,Menschen,Senioren,F\u00fcrsorge,Medizin"
      },
      {
        Ausbildungsberufe: "Altenpflegehelfer (m/w/d)",
        Beschreibung:
          "Altenpflegehelfer unterst\u00fctzen Altenpfleger bei der Betreuung, Versorgung und Pflege \u00e4lterer Menschen.",
        Firma: "Caritasverband Dekanat Bocholt",
        Standnummer: "91",
        Bereich: "Tiefgarage",
        Bereichskuerzel: "TG",
        Bereichsfarbe: "#74AF9B",
        tags: "Pflege,Sozial,Menschen,Senioren,F\u00fcrsorge,Medizin"
      },
      {
        Ausbildungsberufe: "Altenpfleger (m/w/d)",
        Beschreibung:
          "Altenpfleger pflegen und betreuen \u00e4ltere Menschen, die den Alltag nicht mehr allein bew\u00e4ltigen k\u00f6nnen. Durch Freizeitaktivit\u00e4ten, Gespr\u00e4che und einf\u00fchlsame F\u00fcrsorge unterst\u00fctzen sie alte Menschen, so gut es geht am t\u00e4glichen Leben teilzuhaben.",
        Firma: "Azurit Gruppe",
        Standnummer: "46",
        Bereich: "Au\u00dfenbereich",
        Bereichskuerzel: "AU",
        Bereichsfarbe: "#cc3f8b",
        tags: "Pflege,Sozial,Menschen,Senioren,F\u00fcrsorge,Medizin"
      }
    ],
    totalRecordCount: 369,
    version: "16.0.1"
  };

  Array.prototype.groupBy = function(prop) {
    return this.reduce(function(groups, item) {
      const val = item[prop];
      groups[val] = groups[val] || [];
      groups[val].push(item);
      return groups;
    }, {});
  };

  let abfrage = [];
  let items = angebote.liste1.groupBy("Ausbildungsberufe");
  let unsichtbar = true;

</script>

<style>
    .info {display:none;}
</style>

{#each Object.keys(items) as item, i (item)}
  <h4 on:click={()=>unsichtbar=!unsichtbar}>
        {i + 1}) {item}
    </h4>
    <div class:info={unsichtbar}>
        {#each items[item] as angebot}
            {angebot.Firma} / {angebot.Bereich} / {angebot.Standnummer}
            <br />
        {:else}
            Keine Firmen vorhanden.
        {/each}
    </div>
 <hr />
{:else}
    keine Angebote vorhanden
{/each}

我希望显示一个块而不是所有这些块。

Answer 1

如评论中所述，您不能将单个变量用作多个元素的标志。如果您确实使用单个标志，那么打开所有元素是很自然的。相反，您可以使用数组。

let unsichtbar = [];

然后在您的模板中，您需要将 on:click 更改为 {()=>unsichtbar[i]=!unsichtbar[i]}

您可以使用 if 块，而不是使用 class 到 show/hide 您的 div 使用 css。模板现在看起来像这样

{#each Object.keys(items) as item, i (item)}
    <h4 on:click={() => unsichtbar[i]=!unsichtbar[i]}>
        {i + 1}) {item}
    </h4>
    {#if unsichtbar[i]}
        <div>
            {#each items[item] as angebot}
                {angebot.Firma} / {angebot.Bereich} / {angebot.Standnummer}
                <br />
            {:else}
                Keine Firmen vorhanden.
            {/each}
        </div>
    {/if}
    <hr />
{:else}
    keine Angebote vorhanden
{/each}

这是一个有效的 example。

在嵌套 svelte 中切换 div 显示的问题 #each-block

Problems with toggle the display of a div in a nested svelte #each-block

javascript

svelte