如何在jQuery中按属性选择元素？

Question

我想通过它的值属性获取元素。

这里是我使用的代码 -

jQuery(document).ready(function() { 
    jQuery('form input#attribute2').on('focus', function() { 
     var $this = jQuery(this); 
     var $valueofbox = $this.val(); 
     var $form = $this.closest('form'); 
     console.log($form); 
     console.log($valueofbox); 
     var $samebox = $form.find('input.rowvar2[value=$valueofthis]'); 
     console.log($samebox); 
    }); 
}); 

我试图让输入字段与当前选择的输入框的值。 此代码的工作，当我使用 - 的

$form.find('input.rowvar2[value=XXL]'); //notice that the quotes are not required here and it still gets the desired element 

代替

$form.find('input.rowvar2[value=$valueofthis]'); 

或

$form.find('input.rowvar2[value=$this.val()]'); 

有什么可以在这里完成，以解决这个问题？有一个更好的方法吗？

HTML代码 -

<form role="form"> 
    <div class="col-xs-2"> 

     <label for="attribute2">Size</label> 

     <input type="text" class="form-control" id="attribute2" value="XXL"> 
     <br> 

     <input type="text" class="form-control" id="attribute2" value="M"> 
     <br> 

     <input type="text" class="form-control" id="attribute2" value="XXXL"> 
     <br> 

<div class="row"> 
<!-- some HTML --> 
    <div class="col-xs-3"> 
     <input type="text" class="form-control rowvar1 e27a8e79-ba6a-449f-a64b-e94baf1a098d" placeholder="Blue" disabled=""> 
    </div> 

    <div class="col-xs-2"> 

     <input type="text" class="form-control rowvar2" value="M" disabled=""> 
     <br> 

     <input type="text" class="form-control rowvar2" value="L" disabled=""> 
     <br> 

     <input type="text" class="form-control rowvar2" value="XL" disabled=""> 
     <br> 
    </div> 
</div> 
<!-- some html --> 

<div class="row"> 
<!-- some HTML --> 
    <div class="col-xs-3"> 
     <input type="text" class="form-control rowvar1 e27a8e79-ba6a-449f-a64b-e94baf1a098d" placeholder="Blue" disabled=""> 
    </div> 
    <div class="col-xs-2"> 

     <input type="text" class="form-control rowvar2" value="XL" disabled=""> 
     <br> 

     <input type="text" class="form-control rowvar2" value="XXL" disabled=""> 
     <br> 

     <input type="text" class="form-control rowvar2" value="XXXL" disabled=""> 
     <br> 

     <input type="text" class="form-control rowvar2" value="5XL" disabled=""> 
     <br> 
    </div> 
</div> 


    <button id="submittopost" type="Submit" class="btn btn-success pull-right">Publish Product</button> 
</form> 

Answer 1

我不认为有在JS任何花哨的字符串替换？只需手动拼接

$form.find('input.rowvar2[value=' + $valueofbox + ']'); 

Answer 2

尝试使用：

$form.find("input.rowvar2[value=${valueofbox}]");