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

Question

我需要使用 javascript?

获取数据 lp 和 class 值

我想要的逻辑是这样的：

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>

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

How to get the data-lp attribute on my <li> tag?

javascript

jquery

custom-data-attribute