使用 jQuery 在 JSON/Array/Object 中存储来自 select 的选项

Question

正如 GEAfan 所说，删除require()- 静态资产通常从/public/文件夹中提供。

所以，我会创建一个文件夹/public/assets/，并将所有文件夹复制./node_modules/cryptocurrency-icons/到/public/assets/images/文件夹。从那时起，您就可以将字符串传递给src属性。

还有模板文字语法，例如使用反引号而不是连接字符串，使您的代码更具可读性

...

<img

  alt="icon"

  style={{ width: 28, height: 28 }}

  src={`/assets/images/32/color/${coin.symbol ? coin.symbol : "generic"}.png`}

/>

由于coin.symbol始终为真，您将必须动态导入资产以测试它们是否确实存在，以便您能够设置通用图标。

var rows = coins.map((coin: any) => {

    let hasFile: Boolean;

    

    import(`your/path/to/${coin.symbol}.png`).then(() => hasFile = true).catch(() => hasFile = false)

    

  return {

    cells: [

      {

        key: "icon",

        content: (

          <span style={{ display: "flex", alignItems: "center" }}>

            <div style={{ marginRight: 8 }}>

              <img

                alt='icon'

                style={{ width: "32px", height: "32px" }}

                src={`/assets/images/black/${hasFile ? coin.symbol + "@2x" : "generic"}.png`}

              />我希望在以下方面得到一些帮助：

所以，我的 HTML 结构中有这个（通过 WordPress 生成）

<select class="items">

    <option value="0" selected="selected">All Types Of Staff</option>

    <option class="level-0 main-option-1" value="12">Main Option 1</option>

    <option class="level-1 sub-option-1" value="29">Sub Option 1</option>

    <option class="level-1 sub-option-2" value="30">Sub Option 2</option>

</select>

理想情况下，使用 jQuery（我知道，但项目已经在使用它了……）……

我想做的是所有具有“0 级”类的东西，我想添加到数组/JSON 对象/我可以迭代的东西，下面的所有东西都具有 1 级，添加为那个的子类型...

等等，这个想法是我们可以隐藏选择按钮，只有子选项可以作为按钮使用，标签作为标题。

我对管理输出非常有信心，我似乎无法弄清楚如何或最好的方式来存储它......

有人可以帮我吗？我对 jQuery 一点都不陌生，但对自己创建 JS 对象还是很陌生。

Answer 1

您可以遍历level-0选择中的每个选项，将它们的文本添加为标签，将它们的同级level-1选项文本作为项目添加到对象中。然后你可以将这些对象推送到一个数组来生成你想要的结构：let options = [];$('.items option.level-0').each(function(_, el) {&nbsp; let label = $(el).text();&nbsp; let items = [];&nbsp; el = $(el).next();&nbsp; while (el.length && el.attr('class').split(/\s+/).includes('level-1')) {&nbsp; &nbsp; items.push(el.text());&nbsp; &nbsp; el = el.next();&nbsp; }&nbsp; options.push({&nbsp; &nbsp; label,&nbsp; &nbsp; items&nbsp; });});console.log(options);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select class="items">&nbsp; <option value="0" selected="selected">All Types Of Staff</option>&nbsp; <option class="level-0 main-option-1" value="12">Main Option 1</option>&nbsp; <option class="level-1 sub-option-1" value="29">Sub Option 1</option>&nbsp; <option class="level-1 sub-option-2" value="30">Sub Option 2</option>&nbsp; <option class="level-0 main-option-2" value="11" selected="selected">Main Option 2</option>&nbsp; <option class="level-1 sub-option-1" value="28">Sub Option 1</option>&nbsp; <option class="level-1 sub-option-2" value="25">Sub Option 2</option>&nbsp; <option class="level-1 sub-option-3" value="26">Sub Option 3</option>&nbsp; <option class="level-1 sub-option-4" value="27">Sub Option 4</option>&nbsp; <option class="level-0 main-option-3" value="10">Main Option 3</option>&nbsp; <option class="level-1 sub-option-1" value="22">Sub Option 1</option>&nbsp; <option class="level-1 sub-option-2" value="23">Sub Option 2</option></select>