Question

我有以下代码：

    <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>

由于另一个使用class="wp-color-picker"

的主题，我可以使用$('tr[data-name="background_colour"] input.wp-color-picker')获取文本输入

当此文本输入具有值的更改时。我想更改<body>

的背景颜色

<body>位于iframe元素内的tr内data-type="wysiwyg"与tr data-name="background_colour"位于{{1}}

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

jsFiddle：https://jsfiddle.net/rk3fcjkb/19/

Answer 1

你可以做这样的事情

$(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()
    });
  });
});

Demo

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

Answer 2

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

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

Fiddle Example

注意：要使change触发，您需要取消对焦输入元素，如果您希望它立即执行，请改为keyup。

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

2 个答案: