CODEWITHSUNDEEP
c#jqueryasp.net
SearchForKnowledge
SearchForKnowledge

Reputation: 3751

How to make a previous DIV text bold using JQuery

I have the following fiddle: 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");
    });
});

If the textarea is focused, the Comments label is bold, but if the dropdownlist is focused, the Issue label isn't bold.

The dropdownlist is a HTML generated ASP.net control.

How can I resolve it?

Upvotes: 2

Views: 262

Answers (2)

renakre
renakre

Reputation: 8291

You can also use mouseover and mouseout :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");
    });
});

UPDATE

After I gave it a little more thought, I believe .mouseup() would work better for this task.

Upvotes: 1

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

Update

Based on the new HTML provided, I have tweaked the selectors to target the input elements created by the chosen plugin as well as your inputs:

$(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/

You can also combine the event handlers into one and check the event.type property to decide if you are focusin or focusout and toggle the classes accordingly:

$("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/

Typically you would only need one class, which you toggle, rather than two as the default styling should be the same as setNormal. That means you can shorten it further to this:

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/

Original answer

Because of the plugin you are using for the dropdown, the control that gets focus in the dropdown is not .htLeft. That element has been buried within other elements to make the "pretty" control you see.

Try this as a quick fix:

$(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/

Normally I view the DOM in my browser to see what elements get created by plugins and target something specific to them.

Note: closest is always preferable to something like parent("div").parent("div") as it handles DOM changes.

Upvotes: 6

Related Questions