在 <div> 无序列表项中删除并重新添加类属性

如何解决在 <div> 无序列表项中删除并重新添加类属性

这是我能够解决的答案。想把按钮点击事件发生后的css class="jsTree-clicked"从Hyperlink1改成Hyperlink3。

$(document).ready(function () {
        //remove Class
        $('#myJSTree').find('.jsTree-clicked').removeClass('jsTree-clicked');

        //need to do add it to List Item which has Id =3
        //check the list item which has id =3 if so add the class to it
        // It is not a button click event.         
$('#myJSTree li').each(function (i,li) {
            console.log('<li> id =' + $(li).attr('id'));
            var myIdVal = $(li).attr('id');
            if (myIdVal == 3) {
                $(this).addClass('jsTree-clicked');
            }          
        });
    });

.jsTree-clicked { background-color:red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myJSTree">
  <ul class="nav nav-list">
    <li id="1">
      <a class="jsTree-clicked" title="Hyperlink1">HyperLink1</a>
    </li>
    <li id="2">
      <a title="Hyperlink2">HyperLink2</a>
    </li>
    <li id="3">
      <a title="Hyperlink3">HyperLink3</a>
    </li>
  </ul>
</div>

当点击超链接时，JsTree 添加一个 class="jsTree-clicked" 。当您导航到不同的节点时，它将删除并重新向导航节点添加相同的类。

预期

我想要一个函数来根据 div 中的 ID 删除给定列表项的 [class="jsTree-clicked"]。和通过传递 Key 即 ID 将 [class="jsTree-clicked"] 重新添加到任何 ListItem。

我希望我能够解释我的问题。谢谢

我的 JSTree 是第三方开源的。

解决方法

也许这对你有帮助？

$(function () { $('#myJSTree').jstree(); });

const toggle = (e) => {
    if (+$("#test").val()>=10 ) {
      e.target.classList.remove("jstree-clicked");
      console.log("You entered an invalid number.")
    }
    console.log(e.target)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />


<div id="myJSTree">
        <ul>
          <li id="1">
            <a title="Hyperlink1" onclick="toggle(event)">HyperLink1</a>
          </li>
          <li id="2">
            <a title="Hyperlink2">HyperLink2</a>
          </li>
          <li id="3">
            <a title="Hyperlink3">HyperLink3</a>
          </li>
        </ul>
</div>
<input type="text" value="3" id="test"> &lt; 10

我简单地包含了一个基本的 toggle() 函数来演示删除和添加类名“jsTree-clicked”的意义。请注意，JStree 将其他类动态分配给节点，这些类应该保留在那里。

在我看来，类 jstree-clicked（不是：jsTree-clicked）是在单击元素后由 JSTree 设置的。你可能需要进一步尝试才能得到你想要的。

以下内容可能更符合您的要求。仅当满足 href 中的预定义测试条件时，它才会“链接”到给定的 checkinput()：

$(function () { $('#myJSTree').jstree(); });

const checkinput = (e) => {
    if (+$("#test").val()>=10 ) {
      console.log("You entered an invalid number.")
    } else document.location.href=e.target.href;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />


<div id="myJSTree">
        <ul>
          <li id="1">
            <a title="Hyperlink1" href="https://jsonplaceholder.typicode.com/users/1" onclick="checkinput(event)">HyperLink1</a>
          </li>
          <li id="2">
            <a title="Hyperlink2" href="https://jsonplaceholder.typicode.com/users/2">HyperLink2</a>
          </li>
          <li id="3">
            <a title="Hyperlink3">HyperLink3</a>
          </li>
        </ul>
</div>
<input type="text" value="3" id="test"> &lt; 10<br>
HyperLink1 will link to the page "user1" if the input is valid,<br>otherwise an eror will be shown in the console.

$('.nav-list').on('click','li',function() {
    $('.nav-list li.active').removeClass('active');
    $(this).addClass('active');
});

.active{
background-color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myJSTree">
  <ul class="nav nav-list">
    <li id="1">
      <a title="Hyperlink1">HyperLink1</a>
    </li>
    <li id="2">
      <a title="Hyperlink2">HyperLink2</a>
    </li>
    <li id="3">
      <a title="Hyperlink3">HyperLink3</a>
    </li>
  </ul>
</div>