如何使用 jQuery 内联？

Question

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?

Answer 1

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.