javascript - 检查单击了哪个按钮以更改颜色

Question

这是我的问题，由于“链接”、“名字”、“姓氏”按钮，我在特定区域创建了动态跨度，我想检查其中单击了哪个按钮以更改颜色。例如，如果我第一次点击“链接”按钮，则在该区域添加跨度，“链接”按钮将变为红色。如果我再次单击它，跨度将被删除，按钮将变为灰色。

var area = document.getElementById("template");
var message = document.getElementById("message");
var maxLength = 160;
var re = new RegExp("ô|â|ê|ç");

var myTags = new Object();

myTags['company'] = '#ENTREPRISE#';
myTags['city'] = '#VILLE#';
myTags['link'] = '#LIEN#';
myTags['firstname'] = '#PRENOM#';
myTags['lastname'] = '#NOM#';
myTags['title'] = '#TITRE#';

function editTag(zoneId, tag, button) {
  var element = document.getElementById(button.id);
  var zoneDiv = document.getElementById(zoneId + 'Draft');
  var myButton = document.getElementById(zoneId + tag.ucfirst());
  var myLabel = document.createElement('span');

  var labels = zoneDiv.getElementsByTagName('span');
  var spanSize = labels.length;

  var delflag = 0;
  var delIndex = 0;

  if (spanSize != 0) {

    for (myLabId = 0; myLabId < spanSize; myLabId++) {
      var currentLabel = labels[myLabId];
      if (currentLabel.innerHTML === myButton.innerHTML) {
        delflag = 1;
        delIndex = myLabId;
      }
    }
  }

  if (delflag == 1) {
    zoneDiv.removeChild(labels[delIndex]);
    button.classList.toggle("btn-success");
  } else {
    myLabel.setAttribute('class', 'label label-info');
    myLabel.setAttribute('data-effect', 'pop');
    myLabel.setAttribute('contentEditable', 'false');
    myLabel.setAttribute('style', 'cursor:move;font-size:100%;');
    myLabel.setAttribute('name', tag);
    myLabel.setAttribute('draggable', 'true');
    myLabel.innerHTML = myButton.innerHTML;

    zoneDiv.appendChild(myLabel);
    button.classList.toggle("btn-danger");
  }

  //Clean breaklines;
  var bks = zoneDiv.getElementsByTagName('br');
  var brSize = bks.length;

  if (brSize != 0) {
    zoneDiv.removeChild(bks[0]);
  }

  //Event keyboard on deleted elements
  $("span").dblclick(function(handler) {
    myLabel.remove(labels[delIndex]);
    
  });

}

function saveMessage(zoneId) {

  var zoneDiv = document.getElementById(zoneId + 'Draft');

  var message = zoneDiv.childNodes;
  var messSize = message.length;
  var messageContent = '';
  console.log(message);
  for (var messId = 0; messId < messSize; messId++) {
    var superRegex = /[a-zA-Z0-9áàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ._\s\.\,\--]/g;
    if (zoneId === 'mail') {
      superRegex = /[a-zA-Z0-9áàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ._\s\.\,\-\n-]/g;
    }

    if (message[messId].nodeName === '#text' && message[messId].nodeValue.match(superRegex))
    //		if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(/[a-zA-Z0-9\,]/g) && message[messId].nodeValue.length < 100)
    {
      messageContent += message[messId].nodeValue;
    } else if (message[messId].nodeName === 'SPAN') {
      if (message[messId].getAttribute("name") == undefined) {
        continue;
      }

      //messageContent += myTags[message[messId].getAttribute("name")];
      var currentTag = '#' + message[messId].getAttribute("name").toUpperCase() + '#';
      messageContent += currentTag;
    } else if (message[messId].nodeName === 'IMG') {
      messageContent += message[messId].outerHTML;
    } else if (message[messId].nodeName === 'BR') {
      messageContent += message[messId].outerHTML;
    } else if (message[messId].nodeName === 'DIV') {
      messageContent += '<br>' + message[messId].innerHTML;
    }
  }

  var myRegexp = /\+/;
  messageContent.replace(myRegexp, '');

  if (zoneId === 'sms') {
    myRegexp = /\n/;
    messageContent.replace(myRegexp, '');
  }

  var idInput = document.getElementById('id');

  var myData = {
    'rm': 'saveMessage',
    'type': zoneId,
    'message': messageContent,
    'pid': idInput.getAttribute('value')
  };

  if (zoneId === 'mail') {
    var mySubject = document.getElementById('objectArea');

    myData = {
      'rm': 'saveMessage',
      'type': zoneId,
      'subject': mySubject.value,
      'mail': messageContent,
      'pid': idInput.getAttribute('value')
    };

    if (document.getElementById('mailType1').checked) {
      myData['mType'] = 'text';
    } else if (document.getElementById('mailType2').checked) {
      myData['mType'] = 'html';
    }
  }

  $.post("index.pl", myData).done(function(data) {
    window.alert(data);
  });
}

String.prototype.ucfirst = function() {
  return this.charAt(0).toUpperCase() + this.substr(1);
}

function previewMessage(zoneId) {
  var zoneDiv = document.getElementById(zoneId + 'Draft');

  var message = zoneDiv.childNodes;
  var messSize = message.length;
  var messageContent = '';

  var previewDiv = document.getElementById("preview");
  var mailPreview = document.getElementById('mailPreview');

  if (zoneId === 'sms') {
    previewDiv.setAttribute('style', '');
    previewDiv.innerHTML = '<p>Génération en cours ...</p>';
  } else if (zoneId === 'mail') {
    mailPreview.innerHTML = 'Génération en cours...';
  }

  for (var messId = 0; messId < messSize; messId++) {
    var superRegex = /[a-zA-Z0-9áàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ._\s\.\,\--]/g;
    if (message[messId].nodeName === '#text' && message[messId].nodeValue.match(superRegex) && message[messId].nodeValue.length < 100)
    //if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(/[a-zA-Z0-9\,]/g) && message[messId].nodeValue.length < 100)
    {
      messageContent += message[messId].nodeValue;
    } else if (message[messId].nodeName === 'SPAN' && message[messId].nodeName.innerHTML !== '') {
      if (message[messId].getAttribute("name") == undefined) {
        continue;
      }

      //messageContent += myTags[message[messId].getAttribute("name")];
      var currentTag = '#' + message[messId].getAttribute("name").toUpperCase() + '#';
      messageContent += currentTag;
    }
  }

  var myRegexp = /\+/;
  messageContent.replace(myRegexp, '');

  if (zoneId === 'sms') {
    myRegexp = /\n/;
    messageContent.replace(myRegexp, '');
  }

  var idInput = document.getElementById('id');

  var myData = {
    'rm': 'previewMessage',
    'type': zoneId,
    'message': btoa(messageContent),
    'pid': idInput.getAttribute('value')
  };


  if (zoneId === 'mail') {
    var mySubject = document.getElementById('objectArea');

    myData = {
      'rm': 'previewMessage',
      'type': zoneId,
      'subject': mySubject.value,
      'mail': btoa(messageContent),
      'pid': idInput.getAttribute('value')
    };
  }

  $.post("index.pl", myData).done(function(data) {
    if (zoneId === 'sms') {
      previewDiv.innerHTML = '';
      previewDiv.setAttribute("class", "preview");
      previewDiv.setAttribute("style", "background-image:url(/assets/img/smartphone_sms.png);width:435px;height:293px;");

      var myText = document.createElement('p');
      myText.setAttribute('class', 'smstext');
      myText.innerHTML = atob(data);
      //myText.innerHTML = data;
      previewDiv.appendChild(myText);
    } else {
      mailPreview.innerHTML = atob(data);
    }
  });
}

function testMessage(zoneId) {
  var costTestP = document.getElementById('costTest');
  costTestP.innerHTML = 'Calcul en cours ...';

  var zoneDiv = document.getElementById(zoneId + 'Area');

  var message = zoneDiv.childNodes;
  var messSize = message.length;
  var messageContent = '';

  for (var messId = 0; messId < messSize; messId++) {
    if (message[messId].nodeName === '#text' && message[messId].nodeValue.match(/[a-zA-Z0-9\,]/g) && message[messId].nodeValue.length < 100) {
      messageContent += message[messId].nodeValue;
    } else if (message[messId].nodeName === 'SPAN') {
      messageContent += myTags[message[messId].getAttribute("name")];
    }
  }

  var myRegexp = /\+/;
  messageContent.replace(myRegexp, '');

  myRegexp = /\n/;
  messageContent.replace(myRegexp, '');

  var idInput = document.getElementById('id');

  var myData = {
    'rm': 'testsms',
    'message': messageContent,
    'id': idInput.getAttribute('value')
  };

  $.post("index.pl", myData).done(function(data) {
    var costTestP = document.getElementById('costTest');
    costTestP.innerHTML = data;
  });
}

$('#smsDraft').on('dragstart', function(e) {
  console.log(e.target.nodeName);
  if (e.target.nodeName !== 'SPAN') {
    e.stopPropagation();
    e.preventDefault();
    return;
  }
});

#smsArea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  height: 150px;
  overflow: auto;
  padding: 5px;
  resize: both;
  width: 100%;
}

.smstext {
  /*		margin-top: 100px;*/
  margin-left: 60px;
  margin-right: 20px;
  padding-top: 30px;
  font-family: verdana, sans-serif;
}

#mailArea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  height: 200px;
  overflow: auto;
  padding: 5px;
  resize: both;
  width: 500px;
  font-size: 12px;
  margin-top: 5px;
}

.mailInput {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  overflow: auto;
  padding: 5px;
  resize: both;
  font-size: 12px;
  margin-top: 5px;
  width: 300px;
  height: 85px;
  margin-left: 100px;
  margin-top: -20px;
}

.mailtext {
  /*      margin-top: 100px;*/
  margin-left: 60px;
  margin-right: 20px;
  padding-top: 30px;
  font-family: verdana, sans-serif;
}

#webtag {
  margin-top: -392px;
  margin-left: 555px;
  width: 569px;
}

#result {
  display: none;
}

#interaction {
  margin-top: 30px;
  visibility: hidden;
}

#cd-popup {
  background-color: rgba(94, 110, 141, 0.9);
  opacity: 1;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 350px;
  margin: 4em auto;
  border-radius: .25em .25em .4em .4em;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-40px);
  -moz-transform: translateY(-40px);
  -ms-transform: translateY(-40px);
  -o-transform: translateY(-40px);
  transform: translateY(-40px);
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  z-index: 1;
}

#cd-popup.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

#cd-popup p {
  padding: 3em 1em;
  margin-left: -250px;
  height: 100px;
}

#cd-popup div {
  float: left;
  width: 30%;
  list-style: none;
  display: block;
  height: 60px;
  line-height: 60px;
  text-transform: uppercase;
  color: #FFF;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

#object {
  background: #fc7169;
  border-radius: 0 0 0 .25em;
  width: 175px;
  margin-left: -400px;
  cursor: pointer;
  padding: 3px 6px;
  display: inline-block;
}

#object:hover {
  background-color: #fc8982;
}

#body {
  background: #6495ED;
  border-radius: 0 0 0 .25em;
  width: 175px;
  cursor: pointer;
  padding: 3px 6px;
  display: inline-block;
  margin-left: -150px;
}

#body:hover {
  background-color: #fc8982;
}

#titre {
  background: #A52A2A;
  border-radius: 0 0 0 .25em;
  width: 175px;
  margin-left: 10px;
  cursor: pointer;
  padding: 3px 6px;
  display: inline-block;
}

#titre:hover {
  background-color: #fc8982;
}

#note {
  background: #006400;
  border-radius: 0 0 0 .25em;
  width: 175px;
  margin-left: 10px;
  cursor: pointer;
  padding: 3px 6px;
  display: inline-block;
}

#cd-popup #note:hover {
  background-color: lightsteelblue;
}

#cd-popup .cd-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
}

#cd-popup .cd-popup-close::before,
#cd-popup .cd-popup-close::after {
  content: '';
  position: absolute;
  top: 12px;
  width: 14px;
  height: 3px;
  background-color: #8f9cb5;
}

#cd-popup .cd-popup-close::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 8px;
}

#cd-popup .cd-popup-close::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 8px;
}

@media only screen and (min-width: 1170px) {
  #cd-popup {
    margin: 8em auto;
  }
}

.webArea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  height: 520px;
  /*overflow: auto;*/
  padding: 5px;
  /*resize: both;*/
  width: 630px;
  font-size: 12px;
  /*margin-top: 55px;*/
  border: 2px dashed #D9D9D9;
  border-radius: 5px;
  text-align: center;
  margin-top: 12%;
}

.webArea>div {
  background-color: #FAEBD7;
  border: 3px dashed #D9D9D9;
  margin-bottom: 15px;
  height: 120px;
  width: 612px;
  overflow: auto;
  overflow-x: hidden;
  /*    margin-left: -1.5%;*/
}

.webArea>div>div {
  transition: all .5s;
  text-align: center;
  float: left;
  padding: 1em;
  margin: 0 1em 1em 0;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  border: 2px solid black;
  /*background: #F7F7F7;*/
  transition: all .5s ease;
  width: 582px;
  /*background-color: #F8F8FF;*/
  height: 110px;
}

.dropTarget>div>div>span {
  font-style: italic;
  margin-right: 5%;
  font-size: 16px;
}

.webArea>div>div>input {
  margin-right: 25%;
  width: 250px;
  height: 40px;
  background-color: white;
}

.webArea>div>div:active {
  /*-webkit-animation: wiggle 0.3s 0s infinite ease-in;
    animation: wiggle 0.3s 0s infinite ease-in;*/
  opacity: .6;
  border: 2px solid #000;
}

#mailArea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  height: 200px;
  overflow: auto;
  padding: 5px;
  resize: both;
  width: 500px;
  font-size: 12px;
  margin-top: 5px;
}

#containerZone {
  border: 1px solid;
  border-radius: 25px;
  */ margin: 3%;
  width: 70%;
  height: 40px;
  text-align: center;
  font-weight: bold;
  color: #000000;
  margin: auto;
  margin-top: 8%;
  margin-left: -450px;
}

#containerZone2 {
  border: 1px solid;
  border-radius: 25px;
  width: 70%;
  height: 40px;
  text-align: center;
  font-weight: bold;
  color: #000000;
  margin: auto;
  margin-top: 100%;
  margin-left: -450px;
}

#webtags {
  margin-top: -40px;
}

#webtags>div {
  margin-left: 20px;
}

#modalTagBody {
  height: 120px;
}

#btnTag {
  margin-top: 20px;
  margin-right: 15px;
}

<html>

<head>
  <meta charset="utf-8">
  <title>Drag & drop Tag</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
</head>

<body>
  <div class="container mtb">
    <div class="row">
      <TMPL_IF NAME="PROFILE">
        <form role="form" action="<TMPL_VAR NAME=MYURL>?rm=saveTemplate" method="POST" enctype="application/x-www-form-urlencoded">
          <TMPL_LOOP NAME="DATA">
            <input type="hidden" id='id' name="id" value="<TMPL_VAR NAME=ID>" />
            <TMPL_IF NAME="TEMPLATE">
              <div class="panel panel-primary" id="panels" data-effect="helix">
                <div class="panel-heading">SMS Message</div>
                <div class="panel-body">
                  <div class="col-lg-6">
                    <div class="form-group">
                    </div>
                    <input type="hidden" name="rm" value="saveTemplate" />
                    <div id="smsArea" class="form-control" contenteditable="true">
                      <p id="smsDraft">
                        <TMPL_VAR NAME=TEMPLATE>
                      </p>
                    </div><br />
                    <a href="#" class="btn btn-primary" onClick="saveMessage('sms');">Save</a>
                    <a href="#" class="btn btn-primary" onClick="previewMessage('sms');" data-toggle="modal" data-target="#myModal2">Preview</a>
                    <a href="#" class="btn btn-primary" onClick="testMessage('sms');" data-toggle="modal" data-target="#myModal">SMS Costs</a>
                    <br>
                  </div>
                  <div class="col-lg-6" id='smsTags'>
                    <h4 for="template">Personnalization</h4>
                    <span class="btn btn-default" onClick="editTag('sms','link', this)" id="smsLink" title="link of your website" draggable="true">Link</span>
                    <span class="btn btn-default" onClick="editTag('sms','firstname')" id="smsFirstname" title="your firstname" draggable="true">Firstname</span>
                    <span class="btn btn-default" onClick="editTag('sms','lastname')" id="smsLastname" title="your lastname" draggable="true">Lastname</span>
                  </div>
                  <div class="col-lg-6" style="margin-top: 30px">
                  </div>
                </div>
          </TMPL_LOOP>
          </div>
          <! --/row -->
    </div>
    <! --/container -->
  </div>
</body>

</html>

Answer 1

您可以使用“this”传递点击按钮的引用，例如 onClick = "editTag('sms','link', this)"

一旦您在 onClick 函数中获得被点击元素的引用，您就可以访问相同的元素并切换 css 类(红色类)

function editTag(zoneId, tag, elementRef) {
    // Check if function has received element refrence and toggle class
    if(elementRef){
        var element = document.getElementById(elementRef.id);
        element.classList.toggle("btn-danger")
    }
    var zoneDiv = document.getElementById(zoneId + 'Draft');
    var myButton = document.getElementById(zoneId + tag.ucfirst());
    var myLabel = document.createElement('span');