Question

我有一个包含两个图像的滑块。我将它们分为两类：item active和item。我还有一个下拉选择框，我可以选择颜色。根据选择，我想显示所选颜色。

第一堂课：

<div class="item">
    <div class="product-image image">
        <img src="http://www.aaa.aa/image1" alt="">
    </div>
</div>

第二节课：

<div class="item active">
    <div class="product-image image">
        <img src="http://aaaa.aa/mage2" alt="">
    </div>
</div>

DropDown菜单

<div class="input-select input-select--alternate">
    <select data-choosetxt="Colour" name="super_attribute[124]" id="attribute124" class="validate-select super-attribute-select validation-passed" data-role="none">
        <option value="">Selection1</option>
        <option value="473" price="0">Selection2</option>
        <option value="475" price="0">Selection3</option>
    </select>
</div>

Answer 1

我个人会以不同方式重新构建您的HTML。但这是一个用JS和JQUERY更改内容的简单示例。链接到JS FIddle：

https://jsfiddle.net/f8kzmm0t/

HTML：

coffee

JS：

# CoffeeScript

class Square

    # private static variable
    counter = 0

    # private static method
    countInstance = ->
        counter++; return

    # public static method
    @instanceCount = ->
        counter

    constructor: (side) ->

        countInstance()

        # side is already a private variable, 
        # we define a private variable `self` to avoid evil `this`

        self = this

        # private method
        logChange = ->
            console.log "Side is set to #{side}"

        # public methods
        self.setSide = (v) ->
            side = v
            logChange()

        self.area = ->
            side * side

s1 = new Square(2)
console.log s1.area()   # output 4

s2 = new Square(3)
console.log s2.area()   # output 9

s2.setSide 4            # output Side is set to 4
console.log s2.area()   # output 16

console.log Square.instanceCount() # output 2

CSS：

<div class="item">
    <div class="product-image image">
        <img src="http://www.aaa.aa/image1" alt="">
    </div>
</div>

<div class="item active">
    <div class="product-image image">
        <img src="http://aaaa.aa/mage2" alt="">
    </div>
</div>

<div class="input-select input-select--alternate">
    <select data-choosetxt="Colour" name="super_attribute[124]" id="attribute124" class="validate-select super-attribute-select validation-passed" data-role="none">
        <option value="">Selection1</option>
        <option value="473" price="0">Selection2</option>
        <option value="475" price="0">Selection3</option>
    </select>
</div>

调整以上内容以获得所需的结果。

选择的价值变化

1 个答案: