Question

我想运行一个脚本，我可以专门选择ID标签，其中参数为 _string_n_n
其中'_ string' = release（in这种情况）和'n' =是数字＃
例如 _release_8_3

这是我的代码...我想运行脚本并获取标签的内容，其中ID匹配_string_n_n

<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <script src='https://unpkg.com/mapillary-js@2.5.0/dist/mapillary.min.js'></script>
    <link href='https://unpkg.com/mapillary-js@2.5.0/dist/mapillary.min.css' rel='stylesheet' />

    <style>
        html, body { margin: 0; padding: 0; height: 100%; }
    </style>
</head>

<body>
  <div id="titlebar">
    <center>
        Select option:
        <select onchange="onSelect.call(this, event)">
          <option value="with">With arrows</option>
          <option value="without">Without arrows</option>
        </select>
    </center>
  </div>

  <div id="xxx">
     <table border=1>
      <div id="mly"  style="width:100%;height:100%">
      </div>
     </table>
  </div>

  <script>
        var pegman_position = {lat: 42.628386111111126, lng: 13.291408333333237};
        var mly = new Mapillary.Viewer(
            'mly',
            // Replace this with your own client ID from mapillary.com
            'QjI1NnU0aG5FZFZISE56U3R5aWN4ZzowODkzY2RjNjM1ZmEwYTVi',
            'Sx1k3lLpdFU1TWS-8u_Y-w',
            {
                component: {
                    cover: false
                }
            }
        );

        mly.setCenter(pegman_position.lat, pegman_position.lon);

        // Viewer size is dynamic so resize should be called every time the window size changes
        window.addEventListener("resize", function() { mly.resize(); });

        function onSelect(event) {
            switch (this.options[this.selectedIndex].text) {
               case "With arrows":
                 mly.activateComponent("direction");
                 mly.activateComponent("sequence");
                 break;
               case "Without arrows":
                 mly.deactivateComponent("direction");
                 mly.deactivateComponent("sequence");
                 break;
              }
        }

  </script>
</body>
</html>

Answer 1

e.g。 _release_8_3

var string = 'release';
var number1 = 8;
var number2 = 3;
var selector = '#_'+ [ string, number1, number2 ].join( '_' );

var element = $(selector);
    element = document.querySelector(selector);
    element = document.getElementById('_'+ [ string, number1, number2 ].join( '_' ) );

你有没有尝试过这些？

如果您想要查找与模式匹配的所有ID，请改用类。您可以在查找中进行模式匹配，但是它的性能较差，并且javascript必须检查dom中的每个元素以查看它是否与您的属性模式匹配。相反，通过给类似图案的id元素提供相同的类，您可以执行类查找，它与id和tagName查找一起，是浏览器可以执行的一些最快的查找。

否则，如果您觉得绝对必须这样做，我会尝试引导您使用一个更有效的选择器，然后使用过滤器来找到您想要的内容。例如，在您的示例中，您提供的模式看起来与h3元素相关联，因此您可以这样做。

$('h3').filter(function(){
    return /^[_]release[_][0-9]+[_][0-9]+$/.test(this.id);
});

如果我的正则表达式正确，这将找到所有h3元素，然后过滤以仅返回匹配模式_release_#_#的那些符号，其中＃是任意数字

Answer 2

选择ID包含以下字符串的所有元素（在本例中为_release_：

）

document.querySelectorAll("[id*='_release_']");

在jQuery中：$("[id*='_release_']")

如果你需要不同的反应，这里是more wildcards。

使用通配符使用javaScript查找特定ID

2 个答案: