How use jQuery inline?

February 13, 2022

I have this code:

<p id = 'drop1' style='color:#008cba; background-color:#fffF00;' 
onmouseover="show()" onmouseout="hide()" title="See more">
Hi, my name is text 1.
</p>

that works.

But, I’d like to write it in jQuery. I tried:

<p id = 'drop2' style='color:#008cba; background-color:#fffF00;' 
$(this).attr('See more')>
Hi, my name is text 2.
</p>

Doesn’t work.

Is there a way to write a jQuery only inline form?

>Solution :

You shouldn’t be putting code inline with HTML elements in general. It’s just as easy to incorporate a script element and a proper event handler. However, I suspect that this is what you’re after:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<p id="drop2" style="color: #008cba; background-color: #fffF00;" 
    onmouseover="$(this).text('See more')"
    onmouseout="$(this).text('Hi, my name is text 2')">
  Hi, my name is text 2
</p>

The reason your example doesn’t work is because jQuery’s attr() method, when passed a single argument, attempts to retrieve the value of that attribute. There’s no such attribute in your HTML.