根據另一個元素的變化獲取一個元素（jQuery）

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>

多虧了另一個使用$('tr[data-name="background_colour"] input.wp-color-picker')線程，我能夠使用class="wp-color-picker"獲得文本輸入。

當此文本輸入具有值更改時。 我想更改<body>的背景顏色

<body>是一個內部iframe一個內部tr與元素data-type="wysiwyg"這是對同一水平tr與data-name="background_colour"

有點混亂，所以我希望這是有道理的。

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

演示

PS：在iframe中訪問內容可能會非常麻煩。

Answer 2

您需要先獲取iframe，然后從那里轉到body標簽：

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

小提琴的例子

注意：要觸發change ，您需要使輸入元素失去焦點，如果您希望它立即執行，請在keyup上更改它。

根據另一個元素的變化獲取一個元素（jQuery）

問題描述

2 個解決方案

解決方案1
2 已采納 2015-03-06 05:44:04

解決方案2
1 2015-03-06 05:43:18

根據另一個元素的變化獲取一個元素（jQuery）

問題描述

2 個解決方案

解決方案1 2 已采納 2015-03-06 05:44:04

解決方案2 1 2015-03-06 05:43:18

解決方案1
2 已采納 2015-03-06 05:44:04

解決方案2
1 2015-03-06 05:43:18