通过父级显示内容的更改

发布于 2024-10-20 05:56:04 字数 568 浏览 7 评论 0原文

我在 fieldset 中有 DHTML 内容。这包括纯 html、嵌套对象（甚至其他字段集）以及 input、select 和 textarea 对象的值更改。

如果内容已更改，我想更改字段集的边框。以下工作：

$('fieldset[name=qsfs127]').children('input').change(function(){
    $(this).parent('fieldset').css({border:'1px solid red'});
})

处理输入；我可以将它扩展到选择和文本区域。

问题：

如何对 html 更改执行相同操作？
所有这些更改跟踪是否可以通过将当前 html() 与存储的 html() 进行比较来完成？
如果（2）是肯定的，这会处理“撤消”的情况吗？

编辑：我有一个可以ajax上传内容并保存更改的按钮。然后我删除边框颜色

原文

I have DHTML content inside a fieldset. This includes plain html, nested objects (even other fieldsets), and value change of input, select, and textarea objects.

I'd like to change the border of the fieldset if the contents have been changed.
The following works:

$('fieldset[name=qsfs127]').children('input').change(function(){
    $(this).parent('fieldset').css({border:'1px solid red'});
})

This handles the input; I can extend it to select and textarea.

Questions:

How can I do the same for html changes?
Can all of this change-tracking be done by comparing current html() to stored one?
If yes for (2), will this handle cases of "undo"?

Edit: I have a button that ajax-uploads contents, and saves the changes. I then remove the border color

分享到QQ

分享到微博

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

发布评论

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

满地尘埃落定 2024-10-27 05:56:04

1.) 您可以使用 jQuery livequery 插件类似的方式跟踪 HTML 更改确实如此。 livequery 插件包装了所有 jQuery DOM 操作方法，当调用其中任何方法时，包装方法会执行一些特殊操作，然后代理回原始函数。这仅适用于更新/撤消用例，假设两者都使用 jQuery DOM 操作方法之一来更改状态。

$.each('append', 'prepend', 'after', 'before', 'wrap', 'attr', 'removeAttr', 'addClass', 'removeClass', 'toggleClass', 'empty', 'remove', 'html', function(i, funcName) {

   // Short-circuit if the method doesn't exist
   if (!$.fn[funcName]) return;

   // Save a reference to the original method
   var old = $.fn[funcName];

   // Create a new method
   $.fn[funcName] = function() {

      // Call the original method
      var r = old.apply(this, arguments);

      //Do something special here! Compare the stored html of the fieldset
      //to the new html state and update border accordingly

      // Return the original methods result
      return r;
   }
});

2.) 你可以用这种方式跟踪，似乎有点严厉。如果没有有关您的用例和数据控制的更多信息，就很难推荐任何东西。

3.) 如果您确实将原始 html() 的值存储在字段集中，那么它似乎也适用于撤消情况。您也可以在撤消后比较 html() 的值。但是，如果您要创建一个“撤消”按钮，在我看来，您将需要有一些所有更改的历史记录，一旦用户没有更多的撤消操作，那么他们应该回到原始状态，并且不比较 html( ）应该是需要的。

1.) You could track HTML changes in a similar way that the jQuery livequery plugin does. The livequery plugin wraps all of the jQuery DOM manipulation methods and when any of them are called, the wrapper method does something special and then proxies back to the original function. This will only work for the update/undo uses cases assuming the both use one of the jQuery DOM manipulation methods to change state.

$.each('append', 'prepend', 'after', 'before', 'wrap', 'attr', 'removeAttr', 'addClass', 'removeClass', 'toggleClass', 'empty', 'remove', 'html', function(i, funcName) {

   // Short-circuit if the method doesn't exist
   if (!$.fn[funcName]) return;

   // Save a reference to the original method
   var old = $.fn[funcName];

   // Create a new method
   $.fn[funcName] = function() {

      // Call the original method
      var r = old.apply(this, arguments);

      //Do something special here! Compare the stored html of the fieldset
      //to the new html state and update border accordingly

      // Return the original methods result
      return r;
   }
});

2.) You could keep track this way, seems a little heavy handed. Without more information about your use case and control of data it is hard to recommend anything.

3.) If you did store the value of the original html() in the fieldset it seems that it would work for the undo case as well. You could just compare the value of the html() after an undo as well. However if you are creating an "undo" button it seems to me that you will need to have some history of all changes, and once the user has no more undos then they should be back at the original state and no comparison of the html() should be needed.

回复收藏 0 原文

~没有更多了~