当前位置：文江博客话题详情

使用 jQuery 对表单进行分组突出显示

发布于 2025-01-01 05:04:39 字数 381 浏览 2 评论 0原文

根据本教程对表单进行分组突出显示，我发现： http://www.jankoatwarpspeed.com/ example/ContextHighlighting/

现在我已经构建了表单的一部分，但组突出显示不起作用。任何帮助将不胜感激： http://jsfiddle.net/coachpacman/pYEBZ/

我认为问题出在我的 jQuery 中，但与教程语法进行比较时我似乎找不到问题。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

奢望 2025-01-08 05:04:39

确保在左侧窗格中将 JavaScript 框架设置为 jQuery。当您执行此操作时，当您在表单字段内单击时，整个表单都会突出显示。

如果您只想突出显示单个行，那么您需要更改 HTML 以匹配：

<div class="content">   
    <div class="row">
        <div class="left">First name</div>
        <div class="right"><input name="Text1" type="text" class="text" /></div>
        <div class="clear"></div>
    </div>

    <div class="row">
        <div class="left">Last name</div>
        <div class="right"><input name="Text1" type="text" class="text" /></div>
        <div class="clear"></div>
    </div>

    <div class="row">
        <div class="left">Email</div>
        <div class="right"><input name="Text1" type="text" class="text" /></div>
        <div class="clear"></div>
    </div>

    <div class="row">
        <div class="left">Password</div>
        <div class="right"><input name="Text1" type="text" class="text" /></div>
        <div class="clear"></div>
    </div>
</div>

因为在当前代码中您缺少每个单独的行。

此时，您将必须使用 JavaScript 的另一部分来突出显示整个代码部分：

$('.content .left, .content input, .content textarea, .content select').focus(function()
{
    $(this).parents('.content').addClass("over");
}).blur(function(){ $(this).parents('.content').removeClass("over"); } );

Make sure you set the JavaScript framework to jQuery, on the left-side pane. When you do that, the entire form highlights when you click inside a form field.

If you wished to just highlight an individual row then you need to change your HTML to match:

<div class="content">   
    <div class="row">
        <div class="left">First name</div>
        <div class="right"><input name="Text1" type="text" class="text" /></div>
        <div class="clear"></div>
    </div>

    <div class="row">
        <div class="left">Last name</div>
        <div class="right"><input name="Text1" type="text" class="text" /></div>
        <div class="clear"></div>
    </div>

    <div class="row">
        <div class="left">Email</div>
        <div class="right"><input name="Text1" type="text" class="text" /></div>
        <div class="clear"></div>
    </div>

    <div class="row">
        <div class="left">Password</div>
        <div class="right"><input name="Text1" type="text" class="text" /></div>
        <div class="clear"></div>
    </div>
</div>

Because in your current code you are missing each individual row.

At this point you will have to use the other piece of the JavaScript to highlight an entire section of code:

$('.content .left, .content input, .content textarea, .content select').focus(function()
{
    $(this).parents('.content').addClass("over");
}).blur(function(){ $(this).parents('.content').removeClass("over"); } );

回复收藏 0 原文