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

Question

我有以下小提琴:http://jsfiddle.net/kmgj8ny9/

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标签不是粗体.

下拉列表是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.这意味着你可以进一步缩短它:

例如

$("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更改更好.