根据另一个元素的更改获取一个元素(jquery）

Get an element based on a change of another element (jquery)

本文关键字：元素 jquery 一个 另一个 获取      更新时间：2023-09-26

我有以下代码：

    <tr class="my-field my-field-color-picker" data-name="background_colour" data-type="color_picker">
        <td class="my-input">
            <input type="text" class="wp-color-picker"> 
        </td>
    </tr>
    <tr class="my-field my-field-wysiwyg" data-name="text_block" data-type="wysiwyg">
         <td class="my-input">
                <iframe>
                  <html>
                    <body id="tinymce" class="mce-content-body">
                         some text
                    </body>
                 </html>
               </iframe>
          </td>
    </tr>

由于另一个线程使用了$('tr[data-name="background_colour"] input.wp-color-picker')，我能够class="wp-color-picker"地获取文本输入

当此文本输入的值发生变化时。我想更改<body>的背景颜色

<body>位于具有data-type="wysiwyg"的tr元素内的iframe内，该元素与具有data-name="background_colour"的tr处于同一级别

这有点混乱，所以我希望这是有道理的。

js小提琴：https://jsfiddle.net/rk3fcjkb/19/

你可以做这样的事情 

$(document).ready(function(){
  $('tr[data-name="background_colour"] input.wp-color-picker').on('keyup', function(){
    $(this).closest('tr').siblings('tr[data-type="wysiwyg"]').find('iframe').contents().find('body').css({
      background: $(this).val()
    });
  });
});

演示

PS：访问iframe中的内容可能会变得非常讨厌。

您需要先获取 iframe，然后从那里转到 body 标签：

$( ".wp-color-picker" ).keyup(function() {
    $('tr[data-type="wysiwyg"] td iframe').contents().find("body").css("background-color","blue");
});

小提琴示例

注意：要触发change，您需要取消对输入元素的聚焦，如果您希望它立即执行此操作，请将其更改为keyup。

相关文章：