2

我知道 Wix 还不支持 Jquery，所以我唯一的选择是在他们的 HTML 编辑器中运行它。所以我得到了在 jsfiddle 上完美运行的 HTML、Jquery 和 CSS代码。

但是当我尝试在他们的编辑代码窗口中运行所有这些代码时，Jquery 不起作用并且播放/暂停音频播放器失去了它的过渡。

这是我试图做的：

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.control').on('mousedown', function() {
  $(this).toggleClass('pause play');
});

$(document).on('keyup', function(e) {
  if (e.which == 32) {
    $('.control').toggleClass('pause play');
  }
});

</script>

<div class="control play trigger-audio">
  <span class="left"></span>
  <audio src="https://cbc_r2_tor.akacast.akamaistream.net/7/364/451661/v1/rc.akacast.akamaistream.net/cbc_r2_tor" volume="1.0"></audio>
  <span class="right"></span>
</div>
<br>
<br>
<br>
<div class="control play trigger-audio">
  <span class="left"></span>
  <audio src="http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925" volume="1.0"></audio>
  <span class="right"></span>
</div>

<style type="text/css">
.control {
    border: 2.0px solid #333;
    border-radius: 50%;
    margin: 20px;
    padding: 28px;
    width: 112px;
    height: 112px;
    font-size: 0;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
}

.control,
.control .left,
.control .right,
.control:before {
    display: inline-block;
    vertical-align: middle;
    transition: border 0.4s, width 0.4s, height 0.4s, margin 0.4s;
    transition-tiomig-function: cubic-bezier(1, 0, 0, 1);
}

.control:before {
    content: "";
    height: 112px;
}

.control.pause .left,
.control.pause .right {
    margin: 0;
    border-left: 36.96px solid #333;
    border-top: 0 solid transparent;
    border-bottom: 0 solid transparent;
    height: 96.992px;
}

.control.pause .left {
    border-right: 22.4px solid transparent;
}

.control.play .left {
    margin-left: 18.66666667px;
    border-left: 48.496px solid #333;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-right: 0px solid transparent;
    height: 56px;
}

.control.play .right {
    margin: 0;
    border-left: 48.496px solid #333;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    height: 0px;
}

.control:hover {
    border-color: #000;
}

.control:hover .left,
.control:hover .right {
    border-left-color: #000;
}
</style>
</head>
</html>

我究竟做错了什么？

我是初学者，所以任何帮助将不胜感激。提前致谢 ：）

4

2 回答 2

2

实际上我认为你需要了解的是，Wix Code 本质上是它自己的 jQuery。Wix Code 是 Wix 自己的 DOM 外推框架中的一个 javascript API，它与 jQuery 做类似的事情。

元素在 Wix 编辑器中创建，然后您使用 Wix DOM 使用 $w() 范围选择器和元素 ID 与它们交互。

要使用这样的原始 HTML，您需要将 iframe 添加到您的 Wix 页面，然后在 iframe 中运行您的代码（沙盒）。查看这篇文章了解更多信息：

干杯

于 2019-01-10T14:59:50.417 回答
1

我知道这是一个老问题，但我刚刚看到它:)

您的代码格式错误。您的 html 布局在该head部分而不是body. 另一个问题是在呈现 html 布局之前你有你的功能脚本，所以它可能不会工作。（jsfiddle默认在底部添加javascript部分body）

看看这个方法：

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<style type="text/css">
.control {
border: 2.0px solid #333;
border-radius: 50%;
margin: 20px;
padding: 28px;
width: 112px;
height: 112px;
font-size: 0;
white-space: nowrap;
text-align: center;
cursor: pointer;
}

.control,
.control .left,
.control .right,
.control:before {
display: inline-block;
vertical-align: middle;
transition: border 0.4s, width 0.4s, height 0.4s, margin 0.4s;
transition-tiomig-function: cubic-bezier(1, 0, 0, 1);
}

.control:before {
content: "";
height: 112px;
}

.control.pause .left,
.control.pause .right {
margin: 0;
border-left: 36.96px solid #333;
border-top: 0 solid transparent;
border-bottom: 0 solid transparent;
height: 96.992px;
}

.control.pause .left {
border-right: 22.4px solid transparent;
}

.control.play .left {
margin-left: 18.66666667px;
border-left: 48.496px solid #333;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
border-right: 0px solid transparent;
height: 56px;
}

.control.play .right {
margin: 0;
border-left: 48.496px solid #333;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
height: 0px;
}

.control:hover {
border-color: #000;
}

.control:hover .left,
.control:hover .right {
border-left-color: #000;
}
</style>
</head>

<body>
<div class="control play trigger-audio">
  <span class="left"></span>
  <audio src="https://cbc_r2_tor.akacast.akamaistream.net/7/364/451661/v1/rc.akacast.akamaistream.net/cbc_r2_tor" volume="1.0"></audio>
  <span class="right"></span>
</div>
<br>
<br>
<br>
<div class="control play trigger-audio">
  <span class="left"></span>
  <audio src="http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925" volume="1.0"></audio>
  <span class="right"></span>
</div>

<script>
$('.control').on('mousedown', function() {
  $(this).toggleClass('pause play');
});

$(document).on('keyup', function(e) {
  if (e.which == 32) {
$('.control').toggleClass('pause play');
  }
});

</script>
</body>
</html>

于 2018-12-31T08:56:59.497 回答