我正在寻求Redux/React js的帮助,因为10名自由职业的现代JS技术人员放弃了这项任务。有问题的脚本来自我购买的WordPress商业主题,作者拒绝提供支持,因为支持许可证已过期(未使用)。
因此,主题的前台页面是通过Redux WP插件由名为“theme.js”的文件生成的。它包含javascript压缩代码,太复杂了,无法手动编辑,而我的任务只是将一些div内容块从默认位置移动到新的页面布局中,并具有更吸引人的页面布局。
有兴趣在这里,看看附件中的脚本,“theme.js”是实际生成的布局文件,“edit-blocks-positioning.txt”是我想应用的块修改(到theme.js*),它的jquery版本是“jquery-mod.js”(**),
- 请建议如何编辑(*)或如何让jQuery(**)在Redux生成的“theme.js”之上工作。
我读过关于React,Node JS等.现代框架JS,其中提供了标准的方法来工作jQuery与导入jquey,自定义库方法“nodeQuery”,ES6语法jquery导入和“webpack”的“暴露加载器”,因为这个脚本是在10的js框架库下工作,如React,Node,Babel,WebPack...仍然与所有的NPM模块安装约100 k文件,设置和测试,但没有用在这个小任务!
要补充的是,我有最简单的适用解决方案“jquery-mod.js”,尽管只能在打开的浏览器开发工具中使用。
文件
https://file.io/nUqv7M01rNeP
edit-blocks-positioning.txt 3 KB theme.js 2 MB
jquery-mod.js:
jQuery(function() {
jQuery('section.product--section:nth-child(1)').insertBefore('.profile--owner');
jQuery('.product--actions.flex.justify-between.py-14.pl-24.pr-30.bg-grey-100').insertBefore('.product--advertisement.mt-30');
jQuery('.product--section.product--section__actions.flex.flex-wrap.justify-between.mb-20').insertBefore('.product--advertisement.mt-30');
});
这是我需要在theme.js ` //product id块中编辑的内容:
l.default.createElement("section",{className:"product--section product--section__meta flex flex-wrap mb-20 justify-between items-center item-info"},l.default.createElement("div",{className:"flex"},l.default.createElement("div",{className:"product--id text-grey-1000 text-13 font-light"},(0,c.sprintf)(lc_data.jst[504],o.ID)),(null==e||null===(t=e.options)||void 0===t?void 0:t.published_date)&&""!==(null==e||null===(n=e.options)||void 0===n?void 0:n.published_date)&&l.default.createElement("div",{className:"product--date text-grey-1000 mt-10 ml-10 text-13 font-light "},(0,c.sprintf)(lc_data.jst[728],null==e||null===(r=e.options)||void 0===r?void 0:r.published_date))),!e.premiumOnly&&!o.is_expired&&l.default.createElement("div",{className:"product--info"},l.default.createElement(g.default,{product:o,currentUser:x,options:e.options})),(null==o?void 0:o.is_expired)&&l.default.createElement("div",{className:"py-6 px-10 rounded border border-red-300 bg-red-100 text-base text-red-500"},lc_data.jst[711]))
//product id block,before:
,e.createElement("div",{className:"w-full sm:w-2/3"},e.createElement("div",{className:"profile--owner"},
///产品id块
//添加到比较块:
l.default.createElement("div",{className:"product--actions flex justify-between py-14 pl-24 pr-30 bg-grey-100"},"widget"!==e.options.calculator_position&&o.product_meta.price>0&&o.calculator&&o.calculator.display&&l.default.createElement(_.default,{product:o,currentUser:x}),"0"!==e.options.ad_compare&&l.default.createElement(b.default,{product:o,currentUser:x,options:S}))
//添加到比较块,在:
e.createElement("div",{className:"product--advertisement mt-30"} ...
/添加到比较块
//喜欢视图共享打印小部件:
!(0,a.default)(o)&&!o.is_expired&&l.default.createElement("section",{className:"product--section product--section__actions flex flex-wrap justify-between mb-20"},l.default.createElement("div",{className:"product--actions__left flex flex-wrap"},!(0,a.default)(x)&&l.default.createElement(d.default,{product:o,currentUser:x}),l.default.createElement(f.default,{product:o}),"0"!==e.options.ad_visits&&(null==o?void 0:o.views)&&("always"===S["membership-listings-visits"]||"logged_in"===S["membership-listings-visits"]&&"1"===lc_data.logged_in)&&l.default.createElement(p.default,{product:o}),!(0,a.default)(lc_data.user_ip)&&"0"!==e.options.ad_likes&&l.default.createElement(m.default,{product:o,currentUser:x}),!(0,a.default)(lc_data.user_ip)&&"no"!==e.options.report&&l.default.createElement(h.default,{product:o,options:e.options}),"small-screen"===T&&l.default.createElement(v.default,{product:o})),"default"===T&&l.default.createElement("div",{className:"product--actions__right"},l.default.createElement(v.default,{product:o})))
//喜欢视图共享打印小部件,之前:
e.createElement("div",{className:"product--advertisement mt-30"} ...
///喜欢视图共享打印小部件
”
1条答案
按热度按时间093gszye1#
在不同的JS模块和
Redux/React
框架方法之间进行了大量的测试,旨在允许jQuery
脚本修改DOM元素,我发现实际上jQuery
自定义脚本执行的问题是jQuery
脚本在实际Virtual DOM
元素渲染之前运行的时间,因此解决方案是在页面/脚本加载后运行jQuery
脚本,并使用setTimeout
函数延迟。