Question

JQuery的：

$(document).ready(function(){

    $(".chosen-select").chosen();

    $("body").on("focus", ".htLeft", function (e) {
        //alert(this);
        $(this).parent("div").parent("div").find("div:first-child").first().removeClass("setNormal").addClass("setBold");
    });
    $("body").on("focusout", ".htLeft", function (e) {
        $(this).parent("div").parent("div").find("div:first-child").first().removeClass("setBold").addClass("setNormal");
    });
});

如果textarea是焦点，Comments标签是粗体，但如果重点关注下拉列表，Issue标签不是粗体。

dropdownlist是一个HTML生成的ASP.net控件。

我该如何解决？

Answer 1

更新

根据提供的新HTML，我调整了选择器以定位所选插件创建的输入元素以及输入：

$(document).ready(function () {
    $(".chosen-select").chosen();

    $("body").on("focusin", ".htLeft, .chosen-search input", function (e) {
        console.log(this);
        $(this).closest(".section").find(".span_small:first").removeClass("setNormal").addClass("setBold");
    });
    $("body").on("focusout", ".htLeft, .chosen-search input", function (e) {
        $(this).closest(".section").find(".span_small:first").removeClass("setBold").addClass("setNormal");
    });
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/kmgj8ny9/12/

您还可以将事件处理程序合并为一个并检查event.type属性以确定您是focusin还是focusout并相应地切换类：

$("body").on("focusin focusout", ".htLeft, .chosen-search input", function (e) {
    var focusin = e.type == "focusin";
    $(this).closest(".section").find(".span_small:first").toggleClass("setNormal", !focusin).toggleClass("setBold", focusin);
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/kmgj8ny9/13/

通常，您只需要一个类，而不是两个类，因为默认样式应与setNormal相同。这意味着你可以进一步缩短它：

e.g。

$("body").on("focusin focusout", ".htLeft, .chosen-search input", function (e) {
    $(this).closest(".section").find(".span_small:first").toggleClass("setBold", e.type == "focusin");
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/kmgj8ny9/14/

原始答案

由于您用于下拉列表的插件，因此在下拉列表中获得焦点的控件不是.htLeft。该元素已被隐藏在其他元素中，以实现您所看到的“漂亮”控制。

尝试将其作为快速解决方法：

$(document).ready(function () {

    $(".chosen-select").chosen();

    $("body").on("focusin", ".htLeft,:has(.htLeft)", function (e) {
        //alert(this);
        $(this).closest(".section").find("div:first-child").first().removeClass("setNormal").addClass("setBold");
    });
    $("body").on("focusout", ".htLeft,:has(.htLeft)", function (e) {
        $(this).closest(".section").find("div:first-child").first().removeClass("setBold").addClass("setNormal");
    });
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/kmgj8ny9/3/

通常我会在浏览器中查看DOM以查看插件创建的元素并定位特定于它们的内容。

注意：closest总是比parent("div").parent("div")更适合处理DOM更改。

Answer 2

您还可以使用鼠标悬停和鼠标移除：http://jsfiddle.net/kmgj8ny9/6/

$(document).ready(function(){

   $(".chosen-select").chosen();


   $("body").on("mouseover", ".htLeft", function (e) {              
      $(this).parent("div").find("div:first-child").first().removeClass("setNormal").addClass("setBold");
   });

    $("body").on("mouseout", ".htLeft", function (e) {
        $(this).parent("div").find("div:first-child").first().removeClass("setBold").addClass("setNormal");
    });
});

<强>更新

在我多想一想之后，我相信.mouseup()会更好地完成这项任务。

如何使用JQuery使以前的DIV文本变粗

2 个答案:

更新

原始答案