动态对齐文本。基于选择输入值

时间：2018-03-09 14:25:52

标签： javascript

所以我尝试做的是根据选择输入更改文本的对齐方式。

以下是我想用它改变的文字

＆＃13;
＆＃13; 
/** Change font-alignment */
function changeFontAlignment(fontAlignment) {
  var columns = document.querySelectorAll('.column');

  if (fontAlignment) {
    for (var i = 0; i < columns.length; i++) {
      console.log(columns[i]);
      columns[i].className += " " + fontAlignment.value;

      // Toggle class Alignments
      if (columns[i].classList.length >= 3) {
        columns[i].classList.remove(columns[i].classList.item(1));
      }
    }
  } else {
    for (var i = 0; i < columns.length; i++) {
      columns[i].className += " " + document.querySelector('.exitIntentAlignment').value;
    }
  }
}
＆＃13; 
.left {
  text-align: left;
}

.middle {
  text-align: center;
}

.right {
  text-align: right;
}
＆＃13; 
<li>
  Font-alignment:
  <br>
  <select class="exitIntentFontFamily exitIntentAlignment" name="fontAlignment" onchange="changeFontAlignment(this)">
    <option value="left">left</option>
    <option value="middle">middle</option>
    <option value="right">right</option>
  </select>
</li>
<div class="exit-intent-inner" style="font-size: 24px; font-family: abel; padding-left: 20px; padding-right: 20px;">
  <h1 class="column exit-intent-header left">Test</h1>
  <p class="column description left">Register now to be the first to get all the updates</p>
  <div class="exit-intent-body">
    <div class="column left left">
      <form action="" class="form" style="margin-top: 70px;">
        <div class="inner-form">
          <div class="row">
            <div class="column left left">
              <input placeholder="email" class="email-input" type="text">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="column left left">
            <button class="button" style="width: 300px; height: 40px; border-radius: 0px; color: rgb(255, 255, 255); background-color: rgb(0, 202, 186);">Inschrijven</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

但这有时会很完美，有时它会增加一个双left class

有人可以帮我解决这个问题吗？

4 个答案:

答案 0 :(得分：1)

为什么不翻转逻辑并在外部元素而不是内部使用对齐类？ CSS：

.left .column {
   text-align: left;
}
/* and similar for right and middle */

JS：

function changeFontAlignment(fontAlignment) {
  var container = document.getElementsByClassName('exit-intent-inner')[0]; //or id if you want
  container.classList.remove("left", "middle", "right");
  container.classList.add(fontAlignment);
}

答案 1 :(得分：0)

我认为你最好每次只删除所有3个类并添加你想要的类：

Error C2760 syntax error: token "identifier" where expected ";"

和

columns[i].classList.remove("left", "middle", "right");
columns[i].classList.add(fontAlignment.value);

最终结果：

＆＃13;
＆＃13; 
columns[i].classList.remove("left", "middle", "right");
columns[i].classList.add(document.querySelector('.exitIntentAlignment').value);
＆＃13; 
/** Change font-alignment */
function changeFontAlignment(fontAlignment) {
    var columns = document.querySelectorAll('.column');

    if (fontAlignment) {
        for (var i = 0; i < columns.length; i++) {
            console.log(columns[i]);
            columns[i].classList.remove("left", "middle", "right");
            columns[i].classList.add(fontAlignment.value);
        }
    } else {
        for (var i = 0; i < columns.length; i++) {
            columns[i].classList.remove("left", "middle", "right");
            columns[i].classList.add(document.querySelector('.exitIntentAlignment').value);
        }
    }
}
＆＃13; 
.left {
    text-align: left;
}

.middle {
    text-align: center;
}

.right {
    text-align: right;
}
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

首先，你必须删除最后添加的类：所以它是类列表的最后一个。因此，您使用columns[i].classList.remove("left", "middle", "right");删除它，删除所有这3个类

然后你可以像你一样添加你的课

您还可以删除每个块上的重复左类

＆＃13;
＆＃13; 
/** Change font-alignment */
function changeFontAlignment(fontAlignment) {
  var columns = document.querySelectorAll('.column');

  if (fontAlignment) {
    for (var i = 0; i < columns.length; i++) { columns[i].classList.remove("left", "middle", "right");
		
      columns[i].className += " " + fontAlignment.value;

     
    }
  } else {
    for (var i = 0; i < columns.length; i++) {
      columns[i].className += " " + document.querySelector('.exitIntentAlignment').value;
    }
  }
}
＆＃13; 
.left {
  text-align: left;
}

.middle {
  text-align: center;
}

.right {
  text-align: right;
}
＆＃13; 
<li>
  Font-alignment:
  <br>
  <select class="exitIntentFontFamily exitIntentAlignment" name="fontAlignment" onchange="changeFontAlignment(this)">
    <option value="left">left</option>
    <option value="middle">middle</option>
    <option value="right">right</option>
  </select>
</li>
<div class="exit-intent-inner" style="font-size: 24px; font-family: abel; padding-left: 20px; padding-right: 20px;">
  <h1 class="column exit-intent-header left">Test</h1>
  <p class="column description left">Register now to be the first to get all the updates</p>
  <div class="exit-intent-body">
    <div class="column left left">
      <form action="" class="form" style="margin-top: 70px;">
        <div class="inner-form">
          <div class="row">
            <div class="column left left">
              <input placeholder="email" class="email-input" type="text">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="column left left">
            <button class="button" style="width: 300px; height: 40px; border-radius: 0px; color: rgb(255, 255, 255); background-color: rgb(0, 202, 186);">Inschrijven</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

退房：You Might Not Need jQuery

您可以添加类切换功能，并根据可用选项确定选择。

HTMLElement.prototype.hasClass = function(className) { 
    __hasClass.call(this, this, className);
};
HTMLElement.prototype.addClass = function(className) { 
    __addClass.call(this, this, className);
};
HTMLElement.prototype.removeClass = function(className) { 
    __removeClass.call(this,  this, className);
};
HTMLElement.prototype.toggleClass = function(className, state) {
    __toggleClass.call(this, this, className, state);
};

/** Change font-alignment */
function changeFontAlignment(selectEl) {
  selectEl = selectEl || document.querySelector('.exitIntentAlignment');
  var alignment = selectEl.value;
  var options = getOptions(selectEl);
  var columns = document.querySelectorAll('.column');
  
  console.clear();
  for (var i = 0; i < columns.length; i++) {
    for (var j = 0; j < options.length; j++) {
      columns[i].toggleClass(options[j], options[j] === alignment);
    }
    console.log(columns[i]);
  }
}

function getOptions(selectEl) {
  var values = [];
  for (var i = 0; i < selectEl.length; i++) {
      values.push(selectEl.options[i].value);
  }
  return values;
}

function __hasClass(el, className) {
  if (el.classList) {
    return el.classList.contains(className);
  } else {
    return el.className.indexOf(className) > -1;
  }
}
function __addClass(el, className) {
  var success = !__hasClass(el, className);
  if (el.classList) {
    el.classList.add(className);
  } else {
    el.className += ' ' + className;
  }
  return success;
}
function __removeClass(el, className) {
  var success = __hasClass(el, className);;
  if (el.classList) {
    el.classList.remove(className);
  } else {
    el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
    success = true;
  }
  return success;
}
function __toggleClass(el, className, state) {
  if (state !== undefined ? state === true : !__hasClass(el, className)) {
    __addClass(el, className);
  } else {
    __removeClass(el, className);
  }
}
.left   { text-align: left; }
.middle { text-align: center; }
.right  { text-align: right; }

.field label {
  display: inline-block;
  font-weight: bold;
  width: 8em;
}

.exit-intent-inner {
  font-size: 24px;
  font-family: abel;
  padding-left: 20px;
  padding-right: 20px;
}

.button {
  width: 300px;
  height: 40px;
  border-radius: 0px;
  color: rgb(255, 255, 255);
  background: rgb(0, 202, 186);
}
<div class="field">
  <label>Font-alignment:</label>
  <select class="exitIntentFontFamily exitIntentAlignment" name="fontAlignment" onchange="changeFontAlignment(this)">
    <option value="left">left</option>
    <option value="middle">middle</option>
    <option value="right">right</option>
  </select>
</div>
<div class="exit-intent-inner">
  <h1 class="column exit-intent-header left">Test</h1>
  <p class="column description left">Register now to be the first to get all the updates</p>
  <div class="exit-intent-body">
    <div class="column left left">
      <form action="" class="form" style="margin-top: 70px;">
        <div class="inner-form">
          <div class="row">
            <div class="column left left">
              <input placeholder="email" class="email-input" type="text">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="column left left">
            <button class="button">Inschrijven</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

相关问题
最新问题