リスト要素内の動的フィールドのクラス変更と、リスト要素内のクラス

Question

クラスの一部を認識するためのJsは、ボックスごとに変更され、幅と長さがその2つの違いである動的なフィールドです。 JSの変数セレクタは '.attribute__swatch-width-'と '.attribute__swatch-length-'でなければならないので、クラスの最初の部分だけが番号なしで認識されるようにJSを実行する方法。一致させるために、具体的（^=）で始まり、

var numbers = document.querySelectorAll(".attribute__swatch--width-"), 
 
    letters = document.querySelectorAll(".attribute__swatch--length-"), 
 
    ua = navigator.userAgent, 
 
    event = (ua.match(/iPad/i)) ? "touchstart" : "click"; 
 

 
numbers.forEach(function(box, index) { 
 
    $(box).on(event, function() { 
 
    letters.forEach(function(box) { 
 
     box.classList.remove("showBorder"); 
 
    }); 
 
    var info = document.getElementsByClassName('box-tip')[0]; 
 
    if (index > 2) { 
 
     info.style.left = 11 + ((index - 3) * 45) + 'px'; 
 
    } else { 
 
     info.style.left = 0 + 'px'; 
 
    } 
 
    info.style.visibility = 'visible'; 
 
    letters[index].classList.add("showBorder"); 
 
    }); 
 
    $(document).on("click", '.clicked', function() { 
 
    $('.clicked').removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
    }); 
 

 
});

.list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;} 
 
.list-box {margin:15px auto;padding:0;} 
 
.box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;} 
 
.box-sleeve {margin:15px auto;padding:0;} 
 
.showBorder { outline: 1px dashed #233354; outline-offset:1px;} 
 
.box-tip { 
 
    display:inline; 
 
    margin: auto; 
 
\t position: relative; 
 
\t visibility: hidden; 
 
    padding-left:10px; 
 
} 
 

 
.numberCircle { 
 
    border-radius: 90%; 
 
    font-size: 12px; 
 
    border: 2px solid #000; 
 
    color: #fff; 
 
    background: #000; 
 
    padding: 0 4px; 
 
} 
 

 
.numberCircle span { 
 
    text-align: center; 
 
    display: block; 
 
} 
 

 
li.selected {color:#fff;background-color:#000;} 
 

 
@media (max-width: 768px) { 
 
    .box-tip span { 
 
    position: fixed; 
 
    left: 10px; 
 
    } 
 
    .box-tip span.numberCircle { 
 
    position: fixed; 
 
    left: 236px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span>Test some logic one width</span> 
 

 
<ul class="list-box"> 
 
    <li class="attribute__swatch--width-14.5">1</li> 
 
    <li class="attribute__swatch--width-15">2</li> 
 
    <li class="attribute__swatch--width-15.5">3</li> 
 
    <li class="attribute__swatch--width-16">4</li> 
 
    <li class="attribute__swatch--width-16.5">5</li> 
 
    <li class="attribute__swatch--width-17">6</li> 
 
    <li class="attribute__swatch--width-17.5">7</li> 
 
    <li class="attribute__swatch--width-18">8</li> 
 
</ul> 
 
<div> 
 
<span>Test some logic two length</span> 
 
</div> 
 
<div class="box-tip"> 
 
    <span>Regular length for your collar size</span> 
 
    <span class="numberCircle">?</span> 
 
</div> 
 
<ul class="box-sleeve"> 
 
    <li class="attribute__swatch--length-32">a</li> 
 
    <li class="attribute__swatch--length-34">b</li> 
 
    <li class="attribute__swatch--length-36">c</li> 
 
    <li class="attribute__swatch--length-38">d</li> 
 
    <li class="attribute__swatch--length-40">e</li> 
 
    <li class="attribute__swatch--length-42">f</li> 
 
    <li class="attribute__swatch--length-44">g</li> 
 
    <li class="attribute__swatch--length-46">h</li> 
 
</ul>

Answer 1

あなたはattribute selectorsを使用することができます：以下の私のコードを参照してください。

document.querySelectorAll('[class^="attribute__swatch--width-"]'); 
document.querySelectorAll('[class^="attribute__swatch--length-"]')