Question

我想通过单击标题仅扩展相应的块。现在，当我单击标题时，它们都可以同时工作。

我该如何苗条？

我试图将数据中的标头用作ID。但这没用。

REPL：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块来代替使用CSS显示/隐藏div来使用div。模板现在看起来像这样

{#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。

在嵌套的苗条＃each-block中切换div显示的问题

1 个答案: