Question

我对JavaScript一无所知，我确信这是一件容易的事情，但是在过去的三个小时里，我一直在抨击我的大脑，试图找出它。

我想要的是有一些文字，比如Test.com，点击后会将所有字母转换为大写（TEST.COM）。如果用户再次单击，则文本将全部小写（text.com）。在第三次单击时，文本将返回到原始表单（Test.com）。

这可能吗？

Answer 1

＆＃13;

var count = 1;
$('.text').click(function() {
  $(this).toggleClass('uppercase', count === 2);
  $(this).toggleClass('lowercase', count === 3);
  if (count === 3) {
    count = 0
  }
  count++;

});

＆＃13;

.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="text">CamelCase 1 </span>

＆＃13;

Answer 2

定义2个CSS类。

.ucase {text-transform:uppercase;}
.lcase {text-transform:lowercase;}

结合使用jQuery .hasClass() .removeClass()和.addClass()来切换案例。

从文本中删除所有类以返回原始状态。

jQuery(document).ready(function() {

    jQuery(".textitem").click(function() {

       $t = jQuery(this);
        if($t.hasClass("ucase")) {
            $t.removeClass("ucase").addClass("lcase");
        } else if($t.hasClass("lcase")) {
            $t.removeClass("lcase");
        } else {
            $t.addClass("ucase");
        }
    });
});

小提琴：https://jsfiddle.net/ptj1ke8y/

Answer 3

也许不是最优雅的解决方案，但您可以计算点击次数（模数3），并根据数量调整文本并循环显示3种情况。

var i = 0;
var cl = $('#text').text();
$('#text').click(function() {
  var str = $(this).text();
  if (i % 3 == 0) {
    $('#text').html(str.toUpperCase());
  }
  if (i % 3 == 1) {
    $('#text').html(str.toLowerCase());
  }
  if (i % 3 == 2) {
    $('#text').html(cl);
  }
  i++
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="text">Text</div>

Answer 4

这是啰嗦的香草JS版本：

// grab the element containing the text
var div = document.querySelector('#test');

// grab the text
var text = div.innerHTML;

// save a copy of the text
var originalText = div.innerHTML;

// set `toggle` to O for original
// L = lowercase, U = uppercase
var toggle = 'O';

// add an click listener to the element containing the text
div.addEventListener('click', function () {

    // toggle between the states updating the text
    // of the element with each new click
    switch (toggle) {
            case 'O':
            div.innerHTML = text.toUpperCase();
            toggle = 'U';
            break;
        case 'U':
            div.innerHTML = text.toLowerCase();
            toggle = 'L';
            break;
        case 'L':
            div.innerHTML = originalText;
            toggle = 'O';
            break;
    }
}, false)

DEMO

如果你想让它适用于页面上的多个文本实例，那么这样的东西就可以了。理想情况下，您希望为此使用事件传播，但由于您的页面布局将来可能会发生变化，因此可能不值得冒险：

;(function () {

    // grab all the elements
    var divs = document.querySelectorAll('.test');

    // status is used to keep track of where in the cycle each text item is
    var status = {};

    for (var i = 0, l = divs.length; i < l; i++) {

        var div = divs[i];
        var key = div.innerHTML.toLowerCase();

        // update the status object with the initial text values
        status[key] = {
            status: 'O',
            originalText: div.innerHTML
        };

        // add the listener like last time
        // except this time we monitor the status object for
        // for each text instance
        div.addEventListener('click', function () {
            var text = this.innerHTML.toLowerCase();
            var key = status[text].originalText.toLowerCase();
            var toggle = status[key].status;
            var originalText = status[key].originalText;
            switch (toggle) {
                case 'O':
                    this.innerHTML = originalText.toUpperCase();
                    status[key].status = 'U';
                    break;
                case 'U':
                    this.innerHTML = originalText.toLowerCase();
                    status[key].status = 'L';
                    break;
                case 'L':
                    this.innerHTML = status[key].originalText;
                    status[key].status = 'O';
                    break;
            }
        }, false);
    }

}());

DEMO

Answer 5

您可以使用.toUpperCase()和.toLowerCase() JavaScript方法更改任何文字的大小写。

由于您正在使用jQuery，因此您可以使用.text() jQuery方法来获取和设置任何DOM节点的文本内容。

你需要存储文本原始值的某个位置，以便在第三次单击后获得它，并且jQuery .data()方法对此有好处，因为这样你可以轻松地在一个表现出这种方式的页面。

你可以写这样的东西来制作所有带有类的元素＆＃34; test＆＃34;表现得像你所描述的那样：

  $('.test').click(function () {

    var $this = $(this),
        data = $this.data('clicker');

    if (!data || !data.text) {
      data = {
        text: [
          $this.text(),
          $this.text().toUpperCase(),
          $this.text().toLowerCase()
        ],
        step: 0
      };
    }
    data.step = (data.step + 1) % 3;
    $this.text(data.text[data.step]);
    $this.data('clicker', data);

  });

请参阅：DEMO，了解它如何同时使用3个元素。

Answer 6

我认为这就是你想要的（按钮标题更改以告诉它将要做什么并更改文本）：

        <form name="form1" method="post">
    <input name="instring" id="instring" type="text" value="this is the text string" size="30">
    <input type="button" id="button" name="Convert" value="Make Uppercase >>" onClick="makeUppercase();">
    <input name="outstring" type="text" id="outstring" value="" size="30">
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>


       function makeUppercase(){
           if( $('#button').val()=="Make Uppercase >>"){
                $('#button').attr("value","Make Lowercase >>");
                $('#outstring').attr('value', $('#instring').attr('value').toUpperCase());
           } else if($('#button').val()=="Make Lowercase >>") {
               $('#button').attr("value","Make Original >>");
               $('#outstring').attr('value', $('#instring').attr('value').toLowerCase());
           } else{
               $('#button').attr("value","Make Uppercase >>");
               $('#outstring').attr('value', $('#instring').attr('value'));
           }
       }
    </script>

Answer 7

首先使用 click（）将事件处理程序转移到＆＃34;点击＆＃34;然后使用 .hasClass（）， removeClass（）和 addClass（）来执行和使用css text-transform

HTML文件

<div id="trigger">click me to transform</div>

CSS文件

.uppercase { text-transform: uppercase; }
.lowercase { text-transform:lowercase; }

Javascript文件

$( document ).ready(function() {
   $( "#trigger" ).click(function() {
      if($( "#trigger" ).hasClass( "uppercase" )) {
           $(this).removeClass('uppercase').addClass('lowercase');
      }
      else {
          $(this).removeClass('lowercase').addClass('uppercase');
      }
   });
});

尝试播放Sandbox

单击时需要将文本转换为大写和小写

7 个答案: