javascript - 在 1 个元素上切换类并从其余元素中删除

Question

我更像是一个后端人员，但我对这个与前端相关的小问题感到沮丧。

我有一个带有几个链接的侧面菜单。

<div id="sideMenu" class="vertical-menu">
    <a href="#" id="allCategories" class="active" onclick="changeClass(this)">All</a>
    <a href="#" id="fruit" onclick="changeClass(this)">Fruits</a>
    <a href="#" id="vegetables" onclick="changeClass(this)">Vegetables</a>
    <a href="#" id="fish" onclick="changeClass(this)">Fish</a>
    <a href="#" id="meat" onclick="changeClass(this)">Meats</a>
</div>

我正在尝试在单击时切换 active 类并将其从其他菜单项中删除

<script>
    function changeClass(element) {
        $('#sideMenu').each(function(){
            var theID = $(this).attr('id');
            var menuElement = document.getElementById(theID);
            menuElement.classList.remove('active')
        });
        $(element).toggleClass('active');
    }
</script>

我尝试了几种其他方法，但都失败了，它会切换新项目上的 active 类，但不会将其从其他项目中删除。

编辑

我遇到了另一个问题。

 <div id="sideMenu" class="vertical-menu">
    <a href="/productsTable" id="allCategories" class="active">All</a>
    <a href="/productsTableCategory?id=1" id="fruit">Fruits</a>
    <a href="/productsTableCategory?id=2" id="vegetables">Vegetables</a>
    <a href="/productsTableCategory?id=3" id="fish">Fish</a>
    <a href="/productsTableCategory?id=4" id="meat">Meat</a>
</div>

 <script>
    $("#sideMenu a").click(function(e){
        e.preventDefault();
        $("#sideMenu a.active").removeClass("active");
        $(this).addClass("active");
    })
</script>

和后端

private ProductRepository productRepository;
    private ProductCategoryRepository productCategoryRepository;

@Autowired
public ProductsTableController(ProductRepository productRepository, ProductCategoryRepository productCategoryRepository) {
    this.productRepository = productRepository;
    this.productCategoryRepository = productCategoryRepository;
}

@RequestMapping("/productsTable")
    public String showProductsTable(Model model){
        Iterable<Product> products = productRepository.findAll();
        model.addAttribute("products", products);
        return "productsTable";
    }

@RequestMapping("/productsTableCategory")
    public String showProductsTable(Model model, @RequestParam int id) {
        ProductCategory productCategory = new ProductCategory();
        productCategory.setId(id);
        Iterable<Product> products = productRepository.findByProductCategory(productCategory);
        model.addAttribute("products", products);
        return "productsTable";
    }

现在它工作得几乎完美......几乎因为如果我直接打开 localhost:8080/productsTableCategory?id=1 例如，我将按给定 id 排序我的表。但是，当我尝试通过单击侧面菜单中的链接 1 打开此链接时，它不会将我重定向到任何地方

Answer 1

您需要使用函数 .not() 定位 anchor 元素，排除当前元素，即 element ，然后使用 .removeClass()。并将 id 选择器与 sideMenu 元素一起使用，即 #sideMenu

function changeClass(element) {
    $('#sideMenu a').not(element).removeClass('active')
    $(element).toggleClass('active');
}

<小时/>

我建议您使用不显眼的事件处理程序并使用 jQuery 的 .on() 绑定(bind)事件方法

$('#sideMenu a').on('click', function (e) {
    e.preventDefault();
    $('#sideMenu a').not(this).removeClass('active')
    $(this).toggleClass('active');
})

并删除onclick="changeClass(this)"

$('#sideMenu a').on('click', function(e) {
  e.preventDefault();
  $('#sideMenu a.active').not(this).removeClass('active')
  $(this).toggleClass('active');
})

.active {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sideMenu" class=" vertical-menu">
  <a href="#" class="active">All</a>
  <a href="#">Fruits</a>
  <a href="#">Vegetables</a>
  <a href="#">Fish</a>
  <a href="#">Meats</a>
</div>