0

我正在尝试创建/发明一个新的 javascript 滑块对象，该对象将通过显示基线图像来工作：http: //imgur.com/DuVkE.png

然后我想根据某些情况使用这些“旋钮”在上面分层

http://imgur.com/GKkqx.png 这些已经被“切割”并将被放置在三个黑色旋钮之一上。我有许多不同的颜色，因为我计划穿过它们，使颜色看起来从一种转变为另一种。

所以我需要能够将图像附加到我从用户那里收到的 id 上，然后再操作图像。

我的代码：

<div id='option1'></div>

<script type="text/javascript">

var slide1 = new slider("option1");

我的构造函数看起来像这样：

function slider(id) {

var obj = document.getElementById(id);
if (!obj) { 
var state = -1;
return -1;
}
var state = 0; //blank state

//alert("in");
//alert(document.getElementById(id).className);

//this.addClass("hSliderBack"); INCORRECT SYNTAX!!!
$("#"+id).addClass("hSliderBack"); //this works
}

我用上面的 addClass 解决了这个问题，虽然有点难看。

我的 CSS 脚本：

.hSliderBack
{
background-image: url('/Switches/switchLine.png');
background-repeat: no-repeat;
padding-left: 2px;  /* width of the image plus a little extra padding */
display: block;  /* may not need this, but I've found I do */
}

这就是我可以向构造函数添加图片的方式。还有很多工作要做，但至少这是一个开始。任何意见仍然受到赞赏，因为我很绿色！

4

1 回答 1

0

你在这里写的：

//obj.innerHTML = "<img src=' this doesn't seem right to me.

实际上是一种完全合理可行的方式。<img>您将引用要显示的图像的节点输入到 DOM 中。

但是，在许多情况下，更常见且可能更易于维护的解决方案是使用引用背景图像的 CSS 样式，然后<div>使用导致图像显示的样式将 a 输入到 DOM 中。

但是，您应该问自己，最好在没有任何工具支持的情况下执行此操作。许多最流行的 JavaScript 库都内置了这样的工具，或者至少有一些方法可以让构建这种类型的代码变得更加容易。

当然，如果你这样做是为了在使用框架之前学习 Web 开发的基础知识，这样你就会更彻底地了解他们在做什么，对你来说更有力量:-)

于 2012-11-24T23:20:26.480 回答