Css在Css JavaScript中覆盖/图像旋转

我想创建具有图像旋转、图像颜色变换器（深褐色/灰色）和高度和宽度价格计算器功能的图像编辑器。 我还想在这个编辑器中添加图像选择器（图像裁剪）

有人能帮我更正这个代码吗

在这段代码中，当我点击“旋转”按钮时，img css会覆盖它，它会旋转图像，但当我点击“颜色”按钮时，它会改变颜色，也会旋转图像。。我不知道如何删除此覆盖或使用其他内容

还需要帮助旋转特定div中的图像

$（'input[name=“color”]”）。在（'change'，function（）上{
$（'div.imageDiv'）
.removeClass（'原始深褐色'）
.addClass（$（this.val（））；
});
函数计算（）{
var myBox1=document.getElementById（'box1'）.value；
var myBox2=document.getElementById（'box2'）.value；
var result=document.getElementById（'result'）；
var myResult=[（myBox1*myBox2*0.69）/100]；
result.value=myResult；
}
$（'input'）。单击（函数（）{
变量img=$（'img'）；
if（img.hasklass（'north'））{
img.attr（“类”、“西”）；
}else if（img.hasClass（'west'））{
img.attr（'class'，'south'）；
}else if（img.hasklass（'south'））{
img.attr（“类”、“东”）；
}else if（img.hasClass（'east'））{
img.attr（‘类’、‘北’）；
}
});
img{
显示：块；
宽度：50%；
}
.原版{}乌贼墨{
-webkit过滤器：乌贼墨（1）；
过滤器：乌贼墨（1）；
}
格雷先生{
-webkit过滤器：灰度（1）；
过滤器：灰度（1）；
}
.北{
变换：旋转（0度）；
-ms变换：旋转（0度）；
/*IE 9*/
-webkit变换：旋转（0度）；
/*狩猎与铬*/
}
韦斯特先生{
变换：旋转（90度）；
-ms变换：旋转（90度）；
/*IE 9*/
-webkit变换：旋转（90度）；
/*狩猎与铬*/
}
.南方{
变换：旋转（180度）；
-ms变换：旋转（180度）；
/*IE 9*/
-webkit变换：旋转（180度）；
/*狩猎与铬*/
}
.东部{
变换：旋转（270度）；
-ms变换：旋转（270度）；
/*IE 9*/
-webkit变换：旋转（270度）；
/*狩猎与铬*/
}

颜色


灰色


乌贼墨





长度（厘米）
宽度（厘米）
A中的总价$
它不是覆盖-您将“旋转”处理程序绑定到
$（“输入”）
，这是页面中的每个输入，包括“颜色”按钮

将其更改为更具体的选择器，就像您对“颜色”选择器所做的那样，它应该会工作得更好。
以下是示例，其中包含正确的代码。
您需要将最后一个函数更新为

$('input[!name="color"]').click(function () {
    var img = $('img');
    if (img.hasClass('north')) {
        img.attr('class', 'west');
    } else if (img.hasClass('west')) {
        img.attr('class', 'south');
    } else if (img.hasClass('south')) {
        img.attr('class', 'east');
    } else if (img.hasClass('east')) {
        img.attr('class', 'north');
    }
});

查看js小提琴，看看它是否正常工作

您将单击事件添加到所有的
输入
标记中，因此，单击单选按钮时，它将旋转图像，因此我添加了
输入[！name=“color”]
，以便单击单选按钮时不会启动单击事件
问题在于绑定事件。您正在绑定两个事件：

$('input[name="color"]').on('change', function() {
  //color chnage code
});

$('input').click(function() {
  //Rotation code
});

您将“单击”事件与所有输入绑定，将“更改”事件与颜色复选框绑定

所以当你们点击颜色复选框时，这两个函数都会调用，这就是你们面临问题的原因

解决方案-1:为旋转按钮指定一个“ID”，然后绑定“单击”事件

解决方案2:将“单击”事件绑定到按钮

$('input[name="color"]').on('change', function() {
  //color chnage code
});

$('input:button').click(function() {
  //Rotation code
});

您将单击事件添加到所有输入标记中，因此当单击单选按钮时，它将旋转图像，因此我添加了输入[name=“color”]，以便单击单选按钮时，单击事件开始，单击按钮时，旋转工作，名称为“rotate”


$（'input[name=“rotate”]）。单击（函数（）{
变量img=$（'img'）；
if（img.hasklass（'north'））{
img.attr（'class'，'west'）；
}else if（img.hasClass（'west'））{
img.attr（'class'，'south'）；
}else if（img.hasklass（'south'））{
img.attr（'class'，'east'）；
}else if（img.hasClass（'east'））{
img.attr（'class'，'north'）；
}
});	
$（'input[name=“color”]”）。在（'change'，函数（）{
$（'div.imageDiv'）
.removeClass（'原始深褐色'）
.addClass（$（this.val（））；
});你能纠正它并帮我添加图像选择器吗。。你能帮忙吗。。你能帮忙吗。。
$('input[name="color"]').on('change', function() {
  //color chnage code
});

$('input:button').click(function() {
  //Rotation code
});