如何在我的<li>标签上获取data-lp属性？

Question

我需要使用javascript获取data-lp和类值？

我想要的逻辑是：

if (document.querySelector('li[data-lp="9"].disabled'))
        {
            $('li[data-lp="9"].disabled').append('<style>div{border: 1px solid red;}</style>');
        }
        else
        {
            remove the style i made above.
        }

我想在这种情况下放下。这可能吗？

Answer 1

这将是一个复杂的选择器，因此您需要使用querySelector^MDN。

var lp9 = document.querySelector('li[data-lp="9"].disabled');
lp9.style.color = "red";

<div>
  <ul>
    <li>1</li>
    <li data-lp="4" class="none">2</li>
    <li data-lp="9" class="disabled">3</li>
</div>

如果您正在使用jQuery，因为您现在编辑的问题建议，只需在jQuery中执行整个操作。

var $lp9 = $('li[data-lp="9"]');
if($lp9.is('.disabled')){
    $lp9.append('<style>.div{border: 1px solid red;}</style>');
}else{
    $lp9.empty();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li>1</li>
    <li data-lp="4" class="none">2</li>
    <li data-lp="9" class="disabled">3</li>
  </ul>
</div>
<div class="div">Other Content</div>