Javascript 基于另一个元素的更改获取元素（jquery）_Javascript_Jquery_Html_Css

Javascript 基于另一个元素的更改获取元素（jquery）

javascript jquery html css

Javascript 基于另一个元素的更改获取元素（jquery）,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有以下代码： <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-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\u color”]input.wp color picker'），
当此文本输入值发生变化时。我想更改

位于iframe
内tr
元素内，该元素具有数据类型=“wysiwyg”
，与tr
具有数据名称=“背景色”

这有点乱，所以我希望这是有意义的
jsiddle:
您需要首先获取iframe，然后从那里转到body
标记：
$( ".wp-color-picker" ).keyup(function() {
    $('tr[data-type="wysiwyg"] td iframe').contents().find("body").css("background-color","blue");
});


注意：对于要触发的change
，您需要取消对输入元素的聚焦，如果您希望它立即执行此操作，请将其改为打开keyup
。
您可以执行类似操作
$(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中的内容可能会变得非常糟糕
请发布一个JSFIDLE？页面中还有很多其他iframe。所以我不认为这会起作用，因为我只想让特定的文本框改变iframe主体的背景，它与文本框（.wp color picker
）@renny好吧，我不知道。我将相应地编辑我的答案。data type=“wysiwyg”
是唯一的吗？我试过了，它对我不起作用，你的演示链接似乎也不起作用？是的，它肯定会变得非常糟糕，但不幸的是，这可能是唯一的出路。谢谢我肯定它能用。在输入字段中键入颜色。（类似红色的东西）你能发一个JSFIDLE吗？该jsbin站点似乎不想为我加载：（Dhijraj，我不想打扰你，但也许你可以帮我解决这个问题。我一直在努力想办法解决这个问题。谢谢你。