-1

我有一个 jQuery 脚本，它将输入框的值发送到另一个框，并且还更改了 css 的类。

我遇到的问题是css类是从另一个类继承的，所以它不会改变。如果有人可以帮助我解决这个问题。我肯定欠你的。

为了理解，这里是我网站的链接（您需要将商品添加到购物车才能进入结帐页面，但结帐页面是我遇到的问题。

http://%20http://69.195.124.120/~fuseboxg/checkout/

当你进入这个页面时，你会看到一堆应该有图片的盒子。在该框下方，有一个输入框，当您在其中输入并点击“选择设计”按钮时，它会将您输入的内容传输到该部分下方的“设计选择”框。但它也应该改变该输入的类别。

所以，这是我用来更改类和传输文本的 jQuery 的链接：

小提琴

但我的主要问题是它不会改变类，我认为是因为它不断从 div 继承另一个类

4

4 回答 4

1

您的 JS Fiddle 代码中存在一些问题...

您已经多次定义了函数changeID（可能针对每个按钮！）。只需要一个函数，该函数可以在同一命名空间的代码中的任何位置多次调用。

您有多个文档就绪jQuery(function($){...})绑定实例，这不是必需的。所有相关代码都可以组合在一个实例中。

您将 click 元素分别绑定到每个元素。这可以通过单个绑定来完成className，tagName或者更好地在.delegated()上绑定到父元素。注意：从 JQuery 1.7delegate开始，已被.on()方法取代。

您正在使用toggleClassJQuery 函数。这将仅从单击的元素中添加或删除该类，而不是从其兄弟元素（或其他输入元素）中添加或删除该类。根据我的理解，我认为您想butzz为单击的按钮添加类并将其从所有其他按钮中删除（如果不是这种情况，请在评论中澄清）。这可以通过removeClass对所有按钮和addClass单击元素的方法来完成。

我已经更新了你的小提琴以反映所有这些变化。

更新小提琴

至于继承css规则，您应该知道孩子的规则总是优先的，相同元素的冲突样式也会按照它们在列表中出现的顺序应用。例如，在下面的代码中，两个类都用于相同的元素，如果一起应用，规则 from.butzz将在.butz.

.butz {
    background-color: red;
}

.butzz {
    background-color: green;
}

有时，当任一开发人员无法控制所有 css 样式或由于其他一些不可避免的原因而无法使用 css!important标识符的灵活性时。尽管应该非常谨慎地使用它，因为它会覆盖同一元素的其他冲突规则，但可能会破坏某些样式并使未来在 css 中的添加令人沮丧。

.butzz {
  background-color: green !important;
  /*it will override all other backgroung-color specifications for the element*/
}

编辑：

通过您网站的代码，我发现您将 JQuery 绑定到 ready 函数中作为闭包。您可能会收到“$ 不是函数”错误。将changeID函数移动到文档就绪块内。同时删除所有重复的代码。它将为您节省大量宝贵的调试时间。

jQuery(function($){
    function changeID(elm){
        $('.butz').removeClass('butzz');
        $(elm).addClass('butzz');
    }

    $('.butz').on('click',function(){
        $('#design_choice').val($(this).prev().val());
        changeID(this);
    });
});

试试看。

编辑：

您没有为butzz类定义任何 CSS 规则！在 head 部分的样式声明中添加规则。

.butzz {
    background-color: yellow;
}

此外，您的结构<br>在文本框和按钮之间有一个标签。利用

$(this).siblings('input[type="text"]').val()

代替

$(this).prev().val()

这会将点击绑定功能的第一行更改为

$('#design_choice').val($(this).siblings('input[type="text"]').val());

.prev()

。兄弟姐妹（）

于 2013-09-12T06:45:50.530 回答
0

你既不需要 9$(function($){...})也不需要函数changeID()（你已经重新声明了 8 次）。而是尝试以下操作：

$(function(){
 $('.butz').click(function(){
  this.className=(this.className=='butz'?'butzz':'butz');
  // console.log(this.className); // just for debugging
  $('#design_choice').val($(this).prev('input').val())
   .removeClass().addClass(this.className);
  // console.log(but.attr('class')); // another debugging output       
 });
});

这就是整个脚本。

见这里：http: //jsfiddle.net/Cmqyx/11/

我将（错误的）逻辑changeId()移入了该行

  this.className=(this.className=='butz'?'butzz':'butz');

在这种情况下，我只能在两个班级之间进行更改。当然，如果需要，可以更改此设置以容纳更多要逐步完成的课程。

于 2013-09-12T06:08:58.350 回答
0

而不是 toggleclass 使用 $(elm).removeClass('butz'); $(elm).addClass('butzz'); 传递一个布尔变量 http://api.jquery.com/toggleClass/ 读取 API

于 2013-09-12T05:38:13.113 回答
0

用这个...

function changeID(elm) {
    if($(elm).hasClass("butz")){
    $(elm).removeClass("butz");
     $(elm).addClass("butzz");
    }else{
          $(elm).removeClass("butzz");
     $(elm).addClass("butz");
    }

}
于 2013-09-12T05:59:12.177 回答