CODEWITHSUNDEEP
javascriptjquerycss
Ryu Akira Kenshin Yuki
Ryu Akira Kenshin Yuki

Reputation: 37

add css to a pseudo element of jQuery object that already stored in variable

Here is the issue. I got a js class like so :

Code #1
1| function clNumberField(opts) {
2|   var numberField = $("<input>", opts);
3|   numberField.keydown(function (e) {
4|            /*some method to make sure that only digits are input
5|             i have it in place and this one works*/
6| }

Now I'm trying to use a decorator pattern function that must add a behavior to already stored jQuery element . The behavior is applied to a pseudo element of this field like so:

Code #2
1| function setLabel(inptFld){
2|     var v = inptFld;
3|     var v_w_lbl = inptFld.addClass(":before");
4|     v_w_lbl.css("content","Here goes only numbers");
5| }

And then upon $(document).ready i'm doing the following steps:

Code #3
1| $(document).ready(function () {
1|     var num_fld = new clNumberField({id:"some_id",value: "numbers here"});
1|     setLabel(num_fld);
1|     $("cons").append(num_fld);
1| })

And it wont append the :before styling. Probably I miss some trick in achieving the right selection in line 3 of listed Code #2.

Surfed the web for quite a while now (about an hour I think). Any practical tricks you can offer are appreciated,

Upvotes: 0

Views: 145

Answers (1)

Guffa
Guffa

Reputation: 700910

You don't return the element from the clNumberField function, so num_fld in your ready handler will be underfined.

Add a return statement at the end of the function:

function clNumberField(opts) {
  var numberField = $("<input>", opts);
  numberField.keydown(function (e) {
           /*some method to make sure that only digits are input
            i have it in place and this one works*/
  });
  return numberField;
}

Then, what you are trying to do in the setLabel function is not possible. You can't use the :before pseudo class in an inline style, you need to use it in a style sheet. For example putting this in your style sheet:

.InputLabel:before { content: 'Here goes only numbers' }

Then add that class to the element:

function setLabel(inptFld){
  inptFld.addClass("InputLabel");
}

Upvotes: 1

Related Questions