Question

这是我当前小提琴的链接

JS -

$('.click').on({
    'click': function () {

        var origsrc = $(this).attr('src');
        var src = '';
        if (origsrc == 'http://imageshack.us/a/img703/8236/l6hu.png') src = 'http://imageshack.us/a/img20/1651/fibz.png';
        if (origsrc == 'http://imageshack.us/a/img20/1651/fibz.png') src = 'http://imageshack.us/a/img703/8236/l6hu.png';

        $(this).attr('src', src);

    }
});

我可以使用其他图像切换图像，反之亦然。这没关系，但我想仅在选择绿色图像时限制切换。如果我从选择框中选择3然后我可以将白色图像切换为绿色图像仅3次，不超过3.我还需要另一个场景的帮助 - 如果我从选择框中选择3并切换前3个图像，下一刻我改变将第二张图像变为白色并单击第五张图像变为绿色然后就可以了。我是javascript或jquery的一周，所以需要有关此问题的正确信息。所以PLZ帮助我。

Answer 1

以下是一种更全面的方法fiddle，可在限制更改时保持您的限制同步并处理差异。

var quantity = 0; // will maintain limit    
var stack = []; // will maintain ordered green buttons
$("#select").change(runWrapper);
function runWrapper() {
  quantity = Number($("#select").val()); // set the limit
  groom();  // turn off those that were turned on last
  //run();  // this is your run function, uncomment 
}
function groom(){
    // let's test if we are over the limit
    while(stack.length > quantity) {
        // remove last which was set to green
        $(stack.pop()).trigger("click")

        // to remove the oldest/first set to green use
        //  $(stack.shift()).trigger("click")
    }
}
$('.click').on({
    'click': function () {

            var origsrc = $(this).attr('src');
            var src = '';
        if (origsrc == 'http://imageshack.us/a/img703/8236/l6hu.png') {
            // limit reached
            if(stack.length >= quantity) {
                alert(quantity + " limit reached!");
                return;
            }
            src = 'http://imageshack.us/a/img20/1651/fibz.png';

            // turning green push the DOM reference to the top of the stack
            stack.push(this);
        }
        if (origsrc == 'http://imageshack.us/a/img20/1651/fibz.png') {
            src = 'http://imageshack.us/a/img703/8236/l6hu.png';
        // turning white remove the DOM reference from stack
            var self = this;
            stack = $.grep(stack, function(val) {
               return self != val;     
            })
            console.warn(stack);
        }
       $(this).attr('src', src);

    }
});

Answer 2

您可以像这样更新功能 - 小提琴就在这里 - http://jsfiddle.net/4QkM8/5/

我将选择框的ID更改为 selQty

var selectedCount = 0;  
$('.click').on({
    'click': function () {               
            var origsrc = $(this).attr('src');
            var src = '';
        if (origsrc == 'http://imageshack.us/a/img703/8236/l6hu.png'){ if (selectedCount < $('#selQty').val()){src = 'http://imageshack.us/a/img20/1651/fibz.png';
 selectedCount ++;  
                                                                                                              }                                                                                                              }
        if (origsrc == 'http://imageshack.us/a/img20/1651/fibz.png') {src = 'http://imageshack.us/a/img703/8236/l6hu.png';selectedCount --;}

        $(this).attr('src', src == '' ? origsrc : src);  
    }
});

Answer 3

使用变量来跟踪已选择的项目数，并将其与选择框中的数量进行比较。

var count = 0;
var unselected_img = 'http://imageshack.us/a/img703/8236/l6hu.png';
var selected_img = 'http://imageshack.us/a/img20/1651/fibz.png';
$('.click').on({
    'click': function () {
        var max_allowed = parseInt($("#select").val(), 10);
        var origsrc = $(this).attr('src');
        var src = '';
        if (origsrc == unselected_img && count < max_allowed) {
            src = selected_img;
            count++;
        } else if (origsrc == selected_img) {
            src = unselected_img;
            count--;
        } else {
            alert("Too many selected.");
        }

        if (src) {
            $(this).attr('src', src);
        }

    }
});

DEMO

根据选择框值限制javascript切换

3 个答案: