如何使用jQuery只删除一个属性值而不删除另一个

How can I remove only one attribute value and not another with jQuery?

本文关键字:删除 一个 属性 另一个 jQuery 何使用      更新时间:2024-03-27

因此,我已经在stackoverflow中找到了如何删除整个属性,但我只想删除onClick属性的第一个值,而不想删除第二个值。我对每个容器的所有不同实例都有一个唯一的函数,它们都共享第一个共同的函数。。。一旦点击了这些容器中的任何一个,第一个函数就需要删除,但我需要保留第二个函数,而不需要更改它。我的代码如下:

<div class="halves marginal" onClick="buildFrame(),viscalc()">
<div class="two_one marginal" onClick="buildFrame(),percentOf()">

等等

一旦buildFrame()执行一次:

function buildFrame(){
document.getElementById('screenframe').innerHTML = "<img src='img/screen.png'><iframe id='framecontent'>";

我想从每个类中删除它(但保留percentOf()、viscalc()等)

如何只删除一个属性值而不删除另一个?

所以这就是我要做的。

$("div.marginal").on("click", function(){
   $(this).off("click", buildFrame);
});

将其从函数侦听器的事件队列中删除。

你不能用anon函数来做这件事。

想法:

$("div.marginal").on("click", function(){ 
    var funcs = $(this).attr("onclick").split(",");
    $(this).attr("onclick", funcs[1]);
    console.log("value of 'onclick'", $(this).attr("onclick"));
    // or alternatively
    $(this).off("click", funcs[0].substr(0,funcs[0].length-2))
    //this breaks apart the onclick, turns off the click event for event0, while maintaining
    //   the second event.
});

从我的角度来看,我可以看到的问题是,由于它是内联的,它实际上只执行一次,所以更改onclicks值可能不够,因为它可能不会刷新。不过,上面的jquery可以满足您的需求。

我认为最直接的方法是在buildFrame中传递它,然后在buildFrame内部从调用对象中移除它自己。

<div class="halves marginal" onClick="buildFrame(this),viscalc()">

function buildFrame(obj){
    document.getElementById('screenframe').innerHTML = "<img src='img/screen.png'><iframe id='framecontent'>";
    // not sure why your not closing the iframe tag ill assume you wanted it this way
    $( this ).off("click", buildFrame);
};

**编辑**

错过了您要从所有实例中删除的编辑,这使它变得非常复杂,此解决方案不再可行。

使用自定义选择器相当简单。我认为这可以在没有eval()的情况下完成,但我不确定它有多随意。

给你:

HTML

<div class="halves marginal" onClick="buildFrame();viscalc();"></div>
<div class="two_one marginal" onClick="buildFrame();percentOf();"></div>

Javascript

$.expr[':'].hasFrameMethod = function(obj){
  var onClick = $(obj).attr('onClick');  
  return onClick != undefined ? onClick.split(';').indexOf("buildFrame()") != -1 : false;   
};
function buildFrame(){
    document.getElementById('screenframe').innerHTML = "<img src='img/screen.png'><iframe id='framecontent'>";      
    $('div:hasFrameMethod').each(function(idx, item){
        htItem = $(item);
        var itemClickFns = htItem.attr('onClick') != undefined ? htItem.attr('onClick').split(';') : (htItem.attr('onclick') != undefined ? htItem.attr('onclick').split(';') : "");
        htItem.attr('onClick', '');
        htItem.attr('onclick', '');
        htItem.off("click");
        // re-add any correct secondary actions
        if(itemClickFns.length > 1){
            var strFnClick = "function onclick(event) { ";
            itemClickFns.forEach(function(elem,idx){
                if(elem != "buildFrame()"){
                    if(elem.length > 0){
                        strFnClick += elem + ";";
                        htItem.attr('onclick', htItem.attr('onclick') + elem + ";");
                    }
                }                               
            });
            strFnClick += "}";
            // Rebind the event
            htItem.prop('onclick', eval(strFnClick));
            htItem.click(eval(strFnClick));
        }
    });
}

只要这个代码在jQuery之后加载,它就应该工作。:)